Question

我有一个民意调查系统。人们可以投票并在两张图片之间进行选择我尝试这样做，如果你点击1张图片，另一张图片会改变不透明度。使用下面的代码，只有第一场比赛正常。其余的不会改变不透明度。

        echo "<form method='post' action = 'gestemd-test.php?ronde=".$botb_ronde."&mid=".$member_id."&token=".$token."'>";
            $teller = 1;
                while ($aRecord1 = mysql_fetch_array($nummer1) AND $aRecord2 = mysql_fetch_array($nummer2)) {
                    echo "<input type='hidden' name='id_wedstrijd".$teller."' value='".$aRecord1['id_wedstrijd']."'>";
                    echo "<label id='image1' for='thing1".$teller."'><img src='http://kloep.nl/nix/BOTB/2015/deelneemsters/deelneemsters/".$aRecord1['id_deelneemster'].".png' /></label> <input onkeydown='return keyDown(event);' type='radio' name='wedstrijd".$teller."' value='".$aRecord1['id_deelneemster']."' id='thing1".$teller."'>";
                    echo " VS ";
                    echo "<input onkeydown='return keyDown(event);' type='radio' name='wedstrijd".$teller."' value='".$aRecord2['id_deelneemster']."' id='thing2".$teller."'> <label id='image2' for='thing2".$teller."'><img src='http://kloep.nl/nix/BOTB/2015/deelneemsters/deelneemsters/".$aRecord2['id_deelneemster'].".png' /></label><br />";
                    $teller++;
                }
                $teller--;

                echo "<input type='hidden' name='aantal' value='".$teller."'>";
                echo "<input type='hidden' name='naam' value='".$naam."'>";
                echo "<input type='submit' value='Stem!'>";
            echo "</form>";

以下是我的Javascript功能。我把它放在HEAD标签之间。

        <script type="text/javascript">
        window.onload = function() {
            var image1 = document.getElementById('image1');
            var image2 = document.getElementById('image2');
                image1.onclick=function(){reset();image2.style.opacity = "0.2";}
                image2.onclick=function(){reset();image1.style.opacity = "0.2";}
        }
        function reset(){
            var image1 = document.getElementById('image1');
            var image2 = document.getElementById('image2');
            image1.style.opacity="1.0";image2.style.opacity="1.0";
        }
    </script>

有人可以帮助我吗？

Answer 1

每张图片都需要唯一的ID。为每对图像编写<label>标记时，请按以下方式设置它们：

echo "<label id='image1_".$teller."' onclick='fade(1,".$teller.")' for='thing1".$teller."'>
echo "<label id='image2_".$teller."' onclick='fade(2,".$teller.")' for='thing1".$teller."'>

然后fade中的JavaScript功能如下：

<script type="text/javascript">
    // num is 1 if image1 was clicked, or 2 if image2 was clicked
    // i is the index of the pair being selected (1 through however many pairs)
    function fade(num,i) {
        document.getElementById('image1_'+i).style.opacity = (num==1?"1.0":"0.2");
        document.getElementById('image2_'+i).style.opacity = (num==2?"1.0":"0.2");
    }
</script>

您的脚本生成的html将如下所示：

<label id='image1_1' onclick='fade(1,1)' for='thing11'>
<label id='image2_1' onclick='fade(2,1)' for='thing11'>
<label id='image1_2' onclick='fade(1,2)' for='thing12'>
<label id='image2_2' onclick='fade(2,2)' for='thing12'>
<label id='image1_3' onclick='fade(1,3)' for='thing13'>
<label id='image2_3' onclick='fade(2,3)' for='thing13'>
//... etc for however many pairs

淡化方法会找到它应该的那个，并根据需要设置不透明度，并且没有关于调整哪个图像的歧义。

注意：您根本不需要window.onload功能。

数组的Javascript函数

1 个答案: