Question

我有一个脚本，它接受click事件上的输入标记的值，我需要比较它们以查看它们是否是相同的值。我还在学习Javascript和JQuery，所以我真的需要找到一些帮助。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#swapCard_0").click(function(){

var phpval = document.getElementById('swapCard_0').value;

});

$("#swapCard_1").click(function(){


var phpval = document.getElementById('swapCard_1').value;
});

$("#swapCard_2").click(function(){


var phpval = document.getElementById('swapCard_2').value;
});
$("#swapCard_3").click(function(){


var phpval = document.getElementById('swapCard_3').value;
});
});
</script>

</head>
<body>

<input type="image" id="swapCard_0" src="image/image0.jpg" value="0">
<input type="image" id="swapCard_1" src="image/image1.jpg" value="1">
<input type="image" id="swapCard_2" src="image/image2.jpg" value="0">
<input type="image" id="swapCard_3" src="image/image3.jpg" value="1">
</body>
</html>

因此，假设用户单击图像0然后单击图像2，它们都具有值0，如何在函数中比较它们然后执行更多代码？我确信我需要一个if语句，但我不确定如何在我的代码中正确测试它。当用户点击两个具有相同值的不同图像时，我想播放声音。

Answer 1

您可以拥有一个全局变量，并在用户点击第一个图像时设置它。

            $(document).ready(function(){

            var selectedImageValue;
            $("#swapCard_0").click(function(){            
               CheckValue($(this).val());
            });

            $("#swapCard_1").click(function(){
               CheckValue($(this).val());
            });

            $("#swapCard_2").click(function(){
                CheckValue($(this).val());
            });

            $("#swapCard_3").click(function(){
                CheckValue($(this).val());
            });

            function CheckValue(value)
            {
                if(selectedImageValue != '')
                {
                   selectedImageValue = value;    
                }
                else
                {
                  if(selectedImageValue === value)
                  {
                      //Your logic when image contains the same value
                  }
                }
             }
            });

Answer 2

如果我是你，我将采取以下措施：将类传递给所有图像，以便您可以使用单击侦听器来处理它们。例如class：.image

var phpval;

$('.image').on('click', function() {
  if (phpval && phpval === this.value) {
   //play sound here
  } else {
   phpval = this.value; //set php to this value
  }
});

Answer 3

我会做一些改变。首先，我会在你的所有卡片上放一个课程，这样你就可以用一个选择器来定位所有卡片。然后我会使用以下代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var prev_click;

$(function(){
    $('.swapCard').click(function(){
        var this_click = this.value;

        if(prev_click === this_click){
            playSound();
        }
        else{
            prev_click = this_click;
        }
    });
});
</script>
</head>
<body>
    <input type="image" id="swapCard_0" class="swapCard" src="image/image0.jpg" value="0">
    <input type="image" id="swapCard_1" class="swapCard" src="image/image1.jpg" value="1">
    <input type="image" id="swapCard_2" class="swapCard" src="image/image2.jpg" value="0">
    <input type="image" id="swapCard_3" class="swapCard" src="image/image3.jpg" value="1">
</body>
</html>

此代码侦听单击。然后，它将先前的点击值与当前点击值进行比较。如果它们匹配，则播放声音。如果不这样做，它会存储当前点击值以进行下一次比较。我认为这可以完成你想要做的事情。

比较Javascript中的变量

3 个答案: