我有一个这样的列表:
<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 按钮。
最佳答案
您可以修改 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';
}
关于javascript - 选择和广播 - JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2908942/