Question

我使用jQuery循环来创建HTML部件。

我想创建卡，这些卡的创建取决于我拥有一些数据的阵列，这一部分完成了。

但是对于每张卡，我都有一个用于为其创建ID和功能的按钮：

on("click", function ()

我打电话给allert，该警报仅适用于第一个方框。

CSS：

.cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }
}

HTML：

<main class="cards">
    <div id="test12"></div>
</main>

JS：

$.each(mokData, function (i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button id="tes">Start</button></article>';
    $('#test12').append(templateString);
})

$("#tes")on("click", function () {
    alert("test");
});

我的数组：

var mokData = [
{ category: "Material", id: '1', name: 'Brakedown of machine' },
{ category: "Material", id: '2', name: 'Brakedown of machine' },
{ category: "Tool", id: '3', name: 'Brakedown of machine' },
{ category: "Tool", id: '4', name: 'Brakedown of line' },
{ category: "Tool", id: '5', name: 'Brakedown of machine' },
{ category: "Tool", id: '6', name: 'Brakedown of line' },
{ category: "Tool", id: '7', name: 'Brakedown of machine' },
{ category: "Tool", id: '8', name: 'Brakedown of line' }
];

也许您会看到问题，因为我被卡住了，请尝试为半天时间找到解决方案：（

Answer 1

$(document).ready(function(){
var mokData = [
{ category: "Material", id: '1', name: 'Brakedown of machine' },
{ category: "Material", id: '2', name: 'Brakedown of machine' },
{ category: "Tool", id: '3', name: 'Brakedown of machine' },
{ category: "Tool", id: '4', name: 'Brakedown of line' },
{ category: "Tool", id: '5', name: 'Brakedown of machine' },
{ category: "Tool", id: '6', name: 'Brakedown of line' },
{ category: "Tool", id: '7', name: 'Brakedown of machine' },
{ category: "Tool", id: '8', name: 'Brakedown of line' }
];
$.each(mokData, function (i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button id="tes">Start</button></article>';
    $('#test12').append(templateString);
})

$("#test12").on("click", function () {
    alert("test");
});
});

.cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="cards">
                    <div id="test12"></div>
                </main>

正在工作..

Answer 2

使用时 jQuery("#elemid") 它只会选择具有给定ID的第一个元素。

但是，当您按属性（例如您的情况下的id）进行选择时，它将返回所有匹配的元素，如下所示：

jQuery("[id=elemid]")

信用和更多信息：https://stackoverflow.com/a/6744674/9083055

Answer 3

尝试一下，我将您的按钮ID更改为class insted。

$(document).ready(function() {
  var mokData = [{
      category: "Material",
      id: '1',
      name: 'Brakedown of machine'
    },
    {
      category: "Material",
      id: '2',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '3',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '4',
      name: 'Brakedown of line'
    },
    {
      category: "Tool",
      id: '5',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '6',
      name: 'Brakedown of line'
    },
    {
      category: "Tool",
      id: '7',
      name: 'Brakedown of machine'
    },
    {
      category: "Tool",
      id: '8',
      name: 'Brakedown of line'
    }
  ];

  $.each(mokData, function(i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button class="alertButton">Start</button></article>';
    $('#test12').append(templateString);
  })

  $(".alertButton").on("click", function() {
    alert("test");
  });
})

.cards {
  margin: -1rem;
}

.card {
  width: 220px;
  float: left;
  margin: 1rem;
  border: 1px solid #d3d3d3;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
}

@supports (display: grid) {
  .cards {
    margin: 0;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<main class="cards">
  <div id="test12"></div>
</main>

JS jQuery循环，用于创建HTML卡

3 个答案: