1

我有一个脚本，它接收点击事件中输入标签的值，我需要比较它们以查看它们是否是相同的值。我还在学习 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 语句，但我不确定如何在我的代码中正确测试它。当用户单击具有相同值的两个不同图像时，我想播放声音。

4

3 回答 3

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
                  }
                }
             }
            });
于 2013-09-09T06:29:37.810 回答
0

如果我是你，我会做什么：将一个类传递给所有图像，这样你就可以通过单击监听器来处理它们。例如类：.image

var phpval;

$('.image').on('click', function() {
  if (phpval && phpval === this.value) {
   //play sound here
  } else {
   phpval = this.value; //set php to this value
  }
});
于 2013-09-09T06:33:05.580 回答
0

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

<!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>

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

于 2013-09-09T06:54:18.033 回答