Выборы и радио - JavaScript - PullRequest
Новая
       20

Выборы и радио - JavaScript

0 голосов
/ 26 мая 2010

У меня есть такой список: 

<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, которая действует как переключатель.

Ответы [ 3 ]

0 голосов
/ 26 мая 2010

Вы можете изменить функцию 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';
}
0 голосов
/ 26 мая 2010

В вашем коде уже есть 2 недостатка:

1)

Field.value = метка;

if (Field.value! = Label) { // это никогда не запустится, потому что вы устанавливаете Field.value в // помечаем на одну строку выше }

2) когда вы используете идентификатор, вы можете использовать его только один раз, иначе вы должны использовать класс в ваших элементах '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");
0 голосов
/ 26 мая 2010

Если сформулировать вопрос, то довольно сложно понять, что именно вы имеете в виду, но, надеюсь, приведенный ниже код даст вам результаты, которые вы ищете: 

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, и вы можете удалить вызовы onClick из элементов li: 

<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, а также

...