Javascript - 单击时应该消失的 block 重新出现在其他地方

Question

我试图让页面上的三个方 block (随意放置)在点击时消失，但是出于我不明白的原因，当我点击他们。

它们应该消失。

我做了一个 jsffidle:https://jsfiddle.net/DTcHh/9949/

代码:

HTML

<div class="container">



    <div id="square-zone">
          <!--
          here appear the squares
          -->
        </div>
</div>

Javascript

//randomly place squares
  $(function() { 

    var numInfoSquares = 3;
    var $squareZone = $("#square-zone");
    var $toAppend = $('<div class="info-square"><span class="square" data-toggle="modal"></span></div>');

    for (var c = 0; c < numInfoSquares; c++) {
      $squareZone.append(
        $toAppend.clone()
          .find('.square').attr("data-target", "#myInfoModal" + (c + 1))
          .end()
      );
    };

    // place info squares randomly on the page
    function getRandomInt(min, max) {
      return Math.random() * (max - min + 1) + min;
    }
    $(".info-square").each(function () {
      var topPosition = getRandomInt(8, 70);  
      var leftPosition = getRandomInt(8, 92); 
      $(this).css({
        "top": topPosition+"%",
        "left": leftPosition+"%"
      });
    }); 
    // clicked squares disappears on click
    $(".info-square").click(function () {
      $(this).css("display","none");
      $(this).next().css("display","block");
    });   
  });

CSS

body {
    margin: 10px;
}

#square-zone > div { position: absolute; } 

.info-square > span { 
  display: inline-block;
  cursor: pointer;
  background: url(http://cliparts.co/cliparts/ATb/jRa/ATbjRan5c.png) no-repeat center center;
  width: 30px;
  height: 30px; 
}

如何防止方 block 再次出现？

Answer 1

好吧，只需从您的代码中删除该行即可使其再次出现

$(this).next().css("display","block");


// clicked squares disappears on click
$(".info-square").click(function () {
     $(this).css("display","none");
     //$(this).next().css("display","block");
}); 

用注释行更新了 jsfiddle https://jsfiddle.net/DTcHh/9950/