Question

我有一个有效的JavaScript要点，可以在屏幕上随机创建三个方块。问题是现在它是通过toAppend和clone（）（参见底部的初始代码）创建的，是同一个html块的3倍。

目前生成：

<div class="info-square"><span class="square" data-target="#myInfoModal" data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal" data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal" data-toggle="modal" ></span></div>

我想为每个div 生成每个不同的数据目标，如下所示：

<div class="info-square"><span class="square" data-target="#myInfoModal1"  data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal2"  data-toggle="modal" ></span></div>
<div class="info-square"><span class="square" data-target="#myInfoModal3"  data-toggle="modal" ></span></div>

数字3来自＆＃34; var numInfoSquares＆＃34;

初始代码

$(document).on('ready page:load', function () { 

    // Use jquery to display X squares according 
    var numInfoSquares = 3;
    var $zone = $("#zone");
    var $toAppend = $('<div class="info-square"><span class="square" data-toggle="modal" data-target="#myInfoModal"></span></div>');
    for (var c = 0; c < numInfoSquares; c++)
      $zone.append($toAppend.clone());
    // place 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+"%",
      });
    });   
  });

编辑感谢TJ Crowder

我尝试应用两种解决方案：

1 /首先建议的解决方案

工作得很好

2 /第二个建议的解决方案（使用临时变量）：没有工作

 $(document).on('ready page:load', function () { 

    // Use jquery to display X squares according 
    var numInfoSquares = 3;
    var $zone = $("#zone");
    var $toAppend = $('<div class="info-square"><span class="square" data-toggle="modal"></span></div>');

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

    // place 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+"%",
      });
    });   
  });

但它有两个问题：

它现在只生成1平方（而不是3）
并且它不会创建data-target =＆＃34; #myInfoModal1＆＃34;，＆＃34; #myInfoModal2＆＃34;和data-target =＆＃34;＃myInfoModal3＆＃34;而是生成一个data-target =＆＃34;＃myInfoModal4＆＃34;虽然我想要其中3个（不是数字4）

Answer 1

从此行中删除data-target：

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

然后在你的循环中，将其分配给克隆的范围，包括你的循环索引c（加一，因为你想要1,2,3但c将为0 ，1,2）：

$zone.append(
    $toAppend.clone()
        .find('.square').attr("data-target", "#myInfoModal" + (c + 1))
        .end()
);

在那里，我们

克隆
find范围
添加属性
end获取整个克隆的jQuery对象
...并追加

或者，我们可以使用临时变量：

var $clone = $toAppend.clone();
$clone.find('.square').attr("data-target", "#myInfoModal" + (c + 1));
$zone.append($clone);

Answer 2

请尝试以下代码：

<html>
 <head>
 <title>My title</title>
  <script src="js/jquery.min.js"></script>
  <script>
      $(document).on('ready page:load', function () {
          var numInfoSquares = 3;
          var $zone = $("#zone");
          for (var c = 0; c < numInfoSquares; c++)
            $zone.append('<div class="info-square"><span class="square" data-toggle="modal" data-target="#myInfoModal' + (c + 1) + '"></span></div>');
          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 + "%",
              });
          });
      });
  </script>
 </head>
 <body>
  <div id="zone"></div>
 </body>
</html>

在循环中更改附加的克隆对象 - Javascript

2 个答案: