Question

我在每张桌子上都加了5颗星。根据数组长度添加了表格。我写了一个点击功能，将greystar_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>

Answer 1

divStars包含代码中的所有inputs，因此您将全部更改它们。您需要仅在单击的input的父元素中获取input，以更改一行中的输入。像这样：

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

A live demo at jsFiddle

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

1 个答案: