Javascript-点击消失的方块会重新出现在其他地方

Question

由于某种原因，我试图在页面上获得三个正方形（随机放置）以使其在单击BUt上消失，当我单击它们时，其中一些（通常是第二个或第三个）会再次出现在页面的其他位置。

他们应该消失。

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

编码：

的HTML

<div class="container">



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

Java脚本

//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; 
}

如何防止方块再次出现？

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");
}); 

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

Answer 2

那是因为$(this).next().css("display","block"); 。

假设您单击的是第二个元素，然后将其隐藏，然后您单击的第一个元素现在已隐藏，但是当执行上述行时，它将显示第二个元素，因为它是第一个info-square的下一个同级对象

 //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"); this displayes the next element back if it was already hidden }); }); 

 /* Latest compiled and minified CSS included as External Resource*/ 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div id="square-zone"> <!-- here appear the squares --> </div> </div> 

Answer 3

或者，更改$(this).css("display","none"); 到$(this).css("visibility","hidden"); 也解决了。

这是jsfiddle