Функциональность onclick для динамически добавленных изображений не работает должным образом

Я добавил 5 звезд к каждой таблице & добавил количество таблиц в зависимости от длины массива. Я написал функцию щелчка для звездочки, на которой greystar_image изменено на greenstar_image. когда я щелкнул любые звездообразные изображения в любой строке, только starimages в 1-й таблице меняется. то, что мне нужно, когда я нажимаю звезду в определенной строке, только стайминг в этой конкретной строке должен измениться.Функциональность onclick для динамически добавленных изображений не работает должным образом

мой код;

function init() { 
     var Ques = ['a','b','c','d','e']; 
     var container = document.getElementById('divStars'); 

     for(var i=0;i<Ques.length;i++){  
      var Table = document.createElement('table'); 
      Table.className = 'Table'; 
      var Row = document.createElement('tr'); 
      Row.className = 'Row'; 
      var Column = document.createElement('td'); 
      var x =document.createTextNode(Ques[i]); 
      Column.appendChild(x); 

      for(j=1;j<6;j++){ 
       var starinput = document.createElement('input'); 
       starinput.type = 'image'; 
       starinput.id = j; 
       starinput.class = 'imgclass'; 
       starinput.src="Images/greystar.png"; 
       Column.appendChild(starinput); 
       starinput.onclick = function(){ 
        ChangeState (this.id); 
        function ChangeState (index) { 
         var colStars = divStars.getElementsByTagName ("input"); 
         var k=0; 
         for(k=0;k <colStars.length;k++) { 
          colStars [k]. src = (k <index? "Images/greenstar.png": "Images/greystar.png"); 
         } 
        } 
       } 
      } 

      Row.appendChild(Column); 
      Table.appendChild(Row); 
      container.appendChild(Table); 
     } 
    } 
    window.onload = init 
</script></head> 

<body><div id="divStars"> </div></body>

источник

2013-07-16 msg

'divStars' содержит все значения« starImages »? Если это так, вам нужно изменить 'divStars' на' this.parentElement' в 'ChangeState()' функцию. – Teemu

@Teemu: он все еще не работает – msg

divStars содержит все inputs в вашем коде, поэтому вы меняете их всех. Вам нужно получить input s в родительском элементе только щелкнув input, чтобы изменить ввод в одной строке. Что-то вроде этого:

starinput.onclick = function(){ 
    ChangeState (this.id, this.parentElement); 
    function ChangeState (index, parent) { 
     var colStars = parent.getElementsByTagName ("input"); 
        ... 
    } 
}

A live demo at jsFiddle.

источник

2013-07-16 08:00:29 Teemu

спасибо за помощь. Теперь он работает нормально. – msg

Функциональность onclick для динамически добавленных изображений не работает должным образом

ответ

Смежные вопросы