Question

我试图在页面上得到三个正方形（放置ramdomly）以点击BUt消失，原因我不明白，当我点击时，其中一些（通常是第二个或第三个）重新出现在页面的其他地方它们。

他们应该消失。

我制作了一个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; 
}

如何防止方块重新出现？

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

Javascript - 在点击时消失的块会重新出现在其他位置

3 个答案: