动态添加图像的onclick功能无法正常工作

onclick functionality for dynamically added images are not working properly

本文关键字：常工作 工作 图像 添加 onclick 功能 动态      更新时间：2023-09-26

我为每个表添加了5颗星&根据数组长度添加了个表。我为星形图像写了一个点击功能，上面的graystar_image变成了greenstar_image。当我点击任何行中的任何星形图像时，只有第一个表中的星形图像在变化。我需要的是，当我点击特定行中的一个星时，只有该行中的星图像才会改变。

我的代码是；

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>

divStars包含代码中的所有inputs，因此您将对它们进行全部更改。您只需要在单击的input的父元素中获取input，就可以更改一行中的输入。类似这样的东西：

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

jsFiddle上的实时演示。

相关文章：