jQuery和一个基本的记忆游戏，为什么它只是有点工作？

时间：2017-02-07 09:28:21

标签： jquery html hide

所以我正在制作一个基本的记忆游戏，我只是试图让两个相同的ID图像在被点击时消失。但是，下面的代码确实有效。有点..但不完全，我不明白为什么。问题是，有时只有一个图像被点击时隐藏。有时他们都被隐藏起来，这是一个空的游戏板，其他时候1,2或3个单个图像留在游戏板上 - 是什么导致这个？感谢答案！

$(document).ready(function() {
  var firstClicked;
  $(".pictures").click(function() {
    if (this.id == firstClicked) {
      alert(firstClicked + " " + this.id); /*Just to see if both images get clicked*/
      $(this).hide();
      $("#" + firstClicked).hide();
      firstClicked = null;
    } else {
      firstClicked = this.id;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Play game!</h1>
  <div id="gameboard">
    <div class="pic-row1">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" id="programming">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" id="confusedoldman">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" id="santabeatdown">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" id="sparkles">
    </div>
    <div class="pic-row2">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" id="santabeatdown">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" id="pizzalover">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" id="fishbowling">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" id="monkeys">
    </div>
    <div class="pic-row3">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" id="fishbowling">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" id="confusedoldman">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" id="sparkles">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" id="redpanda">
    </div>
    <div class="pic-row4">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" id="programming">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" id="redpanda">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" id="monkeys">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" id="pizzalover">
    </div>
  </div>
</body>

4 个答案:

答案 0 :(得分：1)

首先，Id应该是唯一值。如果您希望在多个对象上使用相同的值，则应使用class或attribute之类的内容。

我将您的示例更改为使用名为attribute的{​​{1}}。

我还清理了一下代码并多次运行它。我无法重现你的任何错误。

希望这能解决你的问题

cardid
$(document).ready(function() {
  var firstClicked;
  $(".pictures").click(function() {
    if (firstClicked == null) 
    {
      firstClicked = $(this).data("cardid");
      $(this).addClass("selectedCard");
    } 
    else {
      if ($(this).data("cardid") == firstClicked && $(this).hasClass("selectedCard") == false)
      {
        $(this).remove();
        $("#gameboard").find("[data-cardid='" + firstClicked + "']").remove();
      }
       firstClicked = null;
      $(".selectedCard").removeClass("selectedCard");
    }
  });
});

答案 1 :(得分：1)

ID必须是唯一的，你不能有多个具有相同ID的元素。这是使用数据属性和data()

的好地方

我将如何做到这一点：

Working jsFiddle 

$(document).ready(function() { 

  $(".pictures").click(function() {
    var $this = $(this).addClass('selected'); // add selected class and get the clicked element
    var $lastSelected = $('.selected').not($this); 
    if($lastSelected.length > 0){
        var thisId = $this.data('select-id');
        var lastId = $lastSelected.data('select-id');
        console.log(thisId , lastId);
        if(thisId == lastId){
        	$('[data-select-id="' + thisId + '"]').hide();
        }
        $('.selected').removeClass('selected');
    }
  });
});
.pictures {
  width: 180px;
  height: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Play game!</h1>
<div data-select-id="gameboard">
  <div class="pic-row1">
    <img src="programming.jpeg" alt="jQuery code" class="pictures" data-select-id="programming">
    <img src="confusedoldman.jpeg" alt="Confused old man" class="pictures" data-select-id="confusedoldman">
    <img src="santabeatdown.jpeg" alt="Santa ready to rumble" class="pictures" data-select-id="santabeatdown">
    <img src="sparkles.jpeg" alt="Sparkling lights" class="pictures" data-select-id="sparkles">
  </div>
  <div class="pic-row2">
    <img src="santabeatdown.jpeg" alt="Santa ready to rumble santabeatdown" class="pictures">
    <img src="pizzalover.jpg" alt="Loving the pizza" class="pictures" data-select-id="pizzalover">
    <img src="fishbowling.jpg" alt="Fish jumping" class="pictures" data-select-id="fishbowling">
    <img src="monkeys.jpeg" alt="Monkeys" class="pictures" data-select-id="monkeys">
  </div>
  <div class="pic-row3">
    <img src="fishbowling.jpg" alt="Fish jumping" class="pictures" data-select-id="fishbowling">
    <img src="confusedoldman.jpeg" alt="Confused old man" class="pictures" data-select-id="confusedoldman">
    <img src="sparkles.jpeg" alt="Sparkling lights" class="pictures" data-select-id="sparkles">
    <img src="redpanda.jpeg" alt="A red panda" class="pictures" data-select-id="redpanda">
  </div>
  <div class="pic-row4">
    <img src="programming.jpeg" alt="jQuery code" class="pictures" data-select-id="programming">
    <img src="redpanda.jpeg" alt="A red panda" class="pictures" data-select-id="redpanda">
    <img src="monkeys.jpeg" alt="Monkeys" class="pictures" data-select-id="monkeys">
    <img src="pizzalover.jpg" alt="Loving the pizza" class="pictures" data-select-id="pizzalover">
  </div>
</div>

答案 2 :(得分：0)

首先我已将所有id =“”更改为data-id =“”，因为您不能拥有多个具有相同ID的元素。见jsFiddle 

var firstClicked = [];
var indices = [];
$(document).ready(function() {
  $(".pictures").click(function() {
    var id = $(this).data('id');
    var index = $(this).index();
    if ((indices.indexOf(index) == -1) && (firstClicked.indexOf(id) !== -1)) {
      $('*[data-id="' + id + '"]').hide();
      firstClicked = [];
      indices = [];
    } else {
      firstClicked.push(id);
      indices.push(index);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Play game!</h1>
  <div id="gameboard">
    <div class="pic-row1">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-id="programming">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-id="confusedoldman">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-id="santabeatdown">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-id="sparkles">
    </div>
    <div class="pic-row2">
      <img src="santabeatdown.jpeg" alt="Santa ready to rumble" style="width:180px; height:180px;" class="pictures" data-id="santabeatdown">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-id="pizzalover">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-id="fishbowling">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-id="monkeys">
    </div>
    <div class="pic-row3">
      <img src="fishbowling.jpg" alt="Fish jumping" style="width:180px; height:180px;" class="pictures" data-id="fishbowling">
      <img src="confusedoldman.jpeg" alt="Confused old man" style="width:180px; height:180px;" class="pictures" data-id="confusedoldman">
      <img src="sparkles.jpeg" alt="Sparkling lights" style="width:180px; height:180px;" class="pictures" data-id="sparkles">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-id="redpanda">
    </div>
    <div class="pic-row4">
      <img src="programming.jpeg" alt="jQuery code" style="width:180px; height:180px;" class="pictures" data-id="programming">
      <img src="redpanda.jpeg" alt="A red panda" style="width:180px; height:180px;" class="pictures" data-id="redpanda">
      <img src="monkeys.jpeg" alt="Monkeys" style="width:180px; height:180px;" class="pictures" data-id="monkeys">
      <img src="pizzalover.jpg" alt="Loving the pizza" style="width:180px; height:180px;" class="pictures" data-id="pizzalover">
    </div>
  </div>
</body>

答案 3 :(得分：-1)

我观察到两件事。 1.对多个dom元素使用相同的Id无效。这可能是个问题。 2.由于您希望使用“图片”类[$(".pictures").click(...]为每个元素绑定点击事件，建议使用“.each”。

var firstClicked = null;
        var secondClicked = null;

        var firstMaskDiv = null;
        var secondMaskDiv = null;

        function clickVal(keyVal, maskControl) {
            $(maskControl).removeClass("maskedCard");

            if (firstClicked == null) {
                firstClicked = keyVal;
                firstMaskDiv = maskControl;
                return;
            }
            else {
                secondClicked = keyVal;
                secondMaskDiv = maskControl;
            }

            if (firstClicked == secondClicked) {
                //                $("[data-imagecode=" + firstClicked + "]").hide();
                $(firstMaskDiv).hide();
                $(secondMaskDiv).hide();
            }
            else {
                alert("Try Again");
                $(firstMaskDiv).addClass("maskedCard");
                $(secondMaskDiv).addClass("maskedCard");
            }

            firstClicked = null;
            secondClicked = null;
        }
.maskedCard
        {
            cursor: pointer;
            background-color: Orange;
            border: 5px solid gray;
            z-index: 99;
            position: absolute;
            width: 180px;
            height: 180px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
        Play game!</h1>
    <div id="gameboard">
        <table>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('1', this);">
                    </div>
                    <img src="img/programming.jpg" alt="jQuery code" style="width: 180px; height: 180px;"
                        class="pictures" id="programming" data-imagecode="1" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('2', this);">
                    </div>
                    <img src="img/confusedoldman.jpg" alt="Confused old man" style="width: 180px; height: 180px;"
                        class="pictures" id="confusedoldman" data-imagecode="2" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('3', this);">
                    </div>
                    <img src="img/santabeatdown.jpg" alt="Santa ready to rumble" style="width: 180px;
                        height: 180px;" class="pictures" id="santabeatdown" data-imagecode="3" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('4', this);">
                    </div>
                    <img src="img/sparkles.jpg" alt="Sparkling lights" style="width: 180px; height: 180px;"
                        class="pictures" id="sparkles" data-imagecode="4" />
                </td>
            </tr>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('3', this);">
                    </div>
                    <img src="img/santabeatdown.jpg" alt="Santa ready to rumble" style="width: 180px;
                        height: 180px;" class="pictures" id="santabeatdown1" data-imagecode="3" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('5', this);">
                    </div>
                    <img src="img/pizzalover.jpg" alt="Loving the pizza" style="width: 180px; height: 180px;"
                        class="pictures" id="pizzalover" data-imagecode="5" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('6', this);">
                    </div>
                    <img src="img/fishbowling.jpg" alt="Fish jumping" style="width: 180px; height: 180px;"
                        class="pictures" id="fishbowling" data-imagecode="6" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('7', this);">
                    </div>
                    <img src="img/monkeys.jpg" alt="Monkeys" style="width: 180px; height: 180px;" class="pictures"
                        id="monkeys" data-imagecode="7">
                </td>
            </tr>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('6', this);">
                    </div>
                    <img src="img/fishbowling.jpg" alt="Fish jumping" style="width: 180px; height: 180px;"
                        class="pictures" id="fishbowling1" data-imagecode="6" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('2', this);">
                    </div>
                    <img src="img/confusedoldman.jpg" alt="Confused old man" style="width: 180px; height: 180px;"
                        class="pictures" id="confusedoldman1" data-imagecode="2" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('4', this);">
                    </div>
                    <img src="img/sparkles.jpg" alt="Sparkling lights" style="width: 180px; height: 180px;"
                        class="pictures" id="sparkles1" data-imagecode="4" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('8', this);">
                    </div>
                    <img src="img/redpanda.jpg" alt="A red panda" style="width: 180px; height: 180px;"
                        class="pictures" id="redpanda" data-imagecode="8">
                </td>
            </tr>
            <tr>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('1', this);">
                    </div>
                    <img src="img/programming.jpg" alt="jQuery code" style="width: 180px; height: 180px;"
                        class="pictures" id="programming1" data-imagecode="1" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('8', this);">
                    </div>
                    <img src="img/redpanda.jpg" alt="A red panda" style="width: 180px; height: 180px;"
                        class="pictures" id="redpanda1" data-imagecode="8" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('7', this);">
                    </div>
                    <img src="img/monkeys.jpg" alt="Monkeys" style="width: 180px; height: 180px;" class="pictures"
                        id="monkeys1" data-imagecode="7" />
                </td>
                <td>
                    <div class="maskDiv maskedCard" onclick="clickVal('5', this);">
                    </div>
                    <img src="img/pizzalover.jpg" alt="Loving the pizza" style="width: 180px; height: 180px;"
                        class="pictures" id="pizzalover1" data-imagecode="5" />
                </td>
            </tr>
        </table>
    </div>

相关问题
最新问题