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倍完全相同的块。

我想要做的就是这样的事情，我缺少javascript chops：

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来定位子项，而不必使用＆＃34; deal＆＃34;类：
```
$("#deal-zone > div").each(function () { ... }
```
此外，您很可能不需要所有孩子的重复data-toggle和data-target属性。由于它们都是相同的，您可以将这些属性分配给父级，并使用以下jQuery访问它们：
```
var $dealZone = $('#deal-zone');
var data-toggle = $dealZone.attr('data-toggle');
var data-target = $dealZone.attr('data-target');
```
总之，以下是JSFiddle

使用javascript对使用重复的类似div块进行分解

1 个答案: