javascript - 选择和广播-JavaScript

我有一个这样的清单：

<ul>
    <li id="adm-thumb" onclick="javascript:addBanner('bowling.jpg');">
     <div class="adm-tick"></div>
       <img src="img/banners/bowling.jpg" /></li>

    <li id="adm-thumb" onclick="javascript:addBanner('kcc.jpg');">
     <div class="adm-tick"></div>
       <img src="img/banners/kcc.jpg" /></li>

    <li id="adm-thumb" onclick="javascript:addBanner('paintballing.png');">
     <div class="adm-tick"></div>
       <img src="img/banners/paintballing.png" /></li>
</ul>

<input id="bannername" type="text" />

当单击一个项目时，addBanner（）内部的值将添加到输入字段，但是，我希望选择一个列表（当它等于输入值的值。如果该值等于addBanner值中的值，则单击的项目应具有红色背景。

例如

function addBanner(label)
{
 var Field = document.getElementById('bannername');
 Field.value = label;

 if(Field.value != label)
 {
     // I have no idea what to put here
     // assign a class to it? prevent others having the same when ONLY one must have the selected state
 }
}

类似于div按钮的功能，类似于单选按钮。

最佳答案

您可以修改addBanner函数以包括单击的列表项。然后在函数内部，首先从所有列表元素中删除类或样式。然后将所需的类应用于clicked元素。

列表项将变为：

<li onclick="javascript:addBanner('bowling.jpg', this);"> .. </li>

现在，addBanner函数具有两个参数，第二个参数是被单击的列表元素：

/* CSS */
.highlighted {
    background-color: red;
}

/* Javascript */
function addBanner(label, clickedItem) {
    var listItems = document.getElementsByTagName("li");
    // clear all existing classes
    for(var i = 0; i < listItems.length; i++) {
        listItems[i].className = '';
    }

    document.getElementById('bannername').value = label;
    clickedItem.className = 'highlighted';
}