javascript - 使用 javascript 分解重复的相似 div block 的使用

Question

我正在使用 html/javascript 构建一个应用程序。

我觉得我的代码可以通过一些 JavaScript 变得更清晰和分解，但不知道如何找到此代码(同时保持非常高效的页面加载性能)。

<div id="deal-zone">
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"/></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal" >
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal" >
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
  <div class="deal">
    <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
  </div>
</div>

正如你所见，它确实非常非常重复，因为我有 10 倍完全相同的 block 。

我想做的就是这样的事情，但我缺乏 javascript 功能:

function(){display in the html make 10 times repeatedly 
<div class="deal">
        <span class="beamer" data-toggle="modal" data-target="#myModal"></span>   
      </div>
}

注意:如果您顺便想知道，JavaScript 会动态地为每个页面指定一个特定的位置。

$(document).ready(function(){
    function getRandomInt(min, max) {
      return Math.random() * (max - min + 1) + min;
    }
    $(".deal").each(function () {
      var topPosition = getRandomInt(8, 70);  
      var leftPosition = getRandomInt(8, 92); 
      $(this).css({
        "top": topPosition+"%",
        "left": leftPosition+"%",
      });
    });

  });

我该怎么做？

Answer 1

以下是一些可能适合您的提示。

• 如果您想使用 jQuery 为您生成 HTML，您可以执行以下操作:

  var numBlocks = 10;
  var $dealZone = $("#deal-zone");
  var $toAppend = $('<div class="deal"><span class="beamer" data-toggle="modal" data-target="#myModal"></span></div>');
  for(var c = 0; c < numBlocks; c++)
      $dealZone.append($toAppend.clone());
  

  JSFiddle演示(使用<li>，抱歉)

  但是，我只是想指出，这并不是一个很好的 SEO 方式。搜索引擎抓取工具无法很好地识别动态 HTML，因此搜索引擎会发现您的内容丢失了。

• 您的第一个<span>标签有一个结束斜杠。这不是有效的 HTML。应该是:

  data-target="#myModal">
  

  而不是

  data-target="#myModal"/>
  

• 看起来您的 HTML 是某种列表。从语义上讲，您可能需要考虑使用 <ul> 的列表结构。和<li>标签。您仍然可以设置它们的样式以删除内边距、边距和项目符号，以您想要的任何方式显示它们。

• 要简化 CSS 类，(使用当前的 HTML)您可以删除 class="deal"和class="beamer"来自每个子元素。如果您需要此类进行 CSS 样式设置，则可以使用后代选择器(其针对父级的所有直接子级)，如下所示:

  #deal-zone > div { /*styles here*/ } /* targets the current "deal" class */
  #deal-zone > div > span { /*styles here*/ } /* targets the current ".beamer" class */
  

• 您还可以在 jQuery 函数中使用后代选择器。使用以下 JavaScript 来定位子级，而无需使用“deal”类:

  $("#deal-zone > div").each(function () { ... }
  

• 此外，您很可能不需要重复的 data-toggle和data-target所有 child 的属性。由于它们都是相同的，因此您可以将这些属性分配给父级并使用以下 jQuery 访问它们:

  var $dealZone = $('#deal-zone');
  var data-toggle = $dealZone.attr('data-toggle');
  var data-target = $dealZone.attr('data-target');
  

• 总之，这是 JSFiddle 中的一个工作示例。