javascript - 选择和广播 - JavaScript

Question

我有一个这样的列表:

<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() 中的值将被添加到输入字段，但是，我希望选择一个列表(由 css 完成以使其看起来像有)等于输入值的值。如果该值等于 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 按钮。

Answer 1

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

列表项将变为:

<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';
}