0

我有一个这样的列表：

<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 按钮的东西就像一个单选按钮。

4

3 回答 3

0

问题的措辞方式，有点难以理解你的意思，但下面的代码应该有希望给你你所追求的结果：

var liList = document.getElementById('list').childNodes;  

for (var i = 0; i < liList.length; i++){
  liList[i].addEventListener('click',changeColor,false);
} 

function changeColor(e) {
  var el = e.target;

  var liList = document.getElementById('list').childNodes;  

  for (var i = 0; i < liList.length; i++){
    liList[i].backgroundColor = "black";
  } 
  el.style.backgroundColor = "red";
}

您需要为ul元素分配一个 id，并且可以从li元素中删除 onClick 调用：

<ul id="list">
  <li><div class="adm-tick"></div><img src="img/banners/bowling.jpg" /></li>
  <li><div class="adm-tick"></div><img src="img/banners/kcc.jpg" /></li>
  <li><div class="adm-tick"></div><img src="img/banners/paintballing.png" /></li>
</ul>

您可能还想阅读Javascript 事件处理

于 2010-05-25T23:08:34.753 回答
0

您可以修改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';
}
于 2010-05-25T23:09:08.193 回答
0

您的代码中已经存在 2 个缺陷：

1)

Field.value = 标签；

if(Field.value != label) { // 这永远不会运行，因为您将 Field.value 设置为 // 标签上方的一行 }

2) 当你使用一个 id 时，你只能使用一次，否则你应该在你的 'li' 元素中使用一个类。

你的问题很模糊。您希望单击的“li”元素具有红色背景而其余的不是红色吗？

你可以通过普通的 JS 来做到这一点：

var lis= document.getElementsByTagName("li"); 
for (i = 0; i < lis.length; i++) {   
       var li = lis[i];    if(li.className == "adm-thumb") {
       li.backgroundColor = "transparent";   
    } 
 }  

this.backgroundColor = "red";

或 jQuery：

$('adm-thumb').css("backgroundColor", "transparent");
$(this).css("backgroundColor", "red");
于 2010-05-25T23:18:28.623 回答