Question

我使用jQuery的循环，并创建循环以创建一些具有值的框。

问题是，我创建了框，为此框我从数组中获取值，并且对于每个值我都必须采取措施，例如调用allert。

我的代码：

var mokData = [
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', 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="tes">Start</button></article>';
    $('#favoriteCards').append(templateString);
});

$(".tes").on("click", function () {
    alert("Click");
});

.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="favoriteCards"></div>
</main>

如您所见，我对按钮有操作，但这是不正确的，因为我要使用来自数组的数据来为单独的按钮单独发出警报。

Answer 1

将要提醒的数据作为custom attribute(data-*)添加到元素，并在需要提醒时获取它。除了jQuery.each回调中的参数之外，第二个参数是添加第二个参数的元素（甚至可以使用df1 = df1.merge( df2, how="inner", left_index=True, right_index=True )）并将其用于引用元素，而不是通过索引获取。

this

var mokData = [{"category":"Material","id":"Code0-1","name":"Brakedown of machine"},{"category":"Material","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of line"},{"category":"Tool","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of line"},{"category":"Tool","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of line"}];

$.each(mokData, function() {
  var templateString = '<article class="card"><h2>' + this.category + '</h2><p>' + this.name + '</p><p>' + this.id + '</p><button class="tes" data-alert="' + this.name  + '">Start</button></article>';
  $('#favoriteCards').append(templateString);
});

$(".tes").on("click", function() {
  alert($(this).data('alert'));
});

.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;
  }
}

Answer 2

如果要为每张卡返回不同的值，则需要这样做。

var mokData = [
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' }
];

$.each(mokData, function (i) {
var templateString = `<article class='card ${i}'><h2>` + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + i + '</p><button class="tes">Start</button></article>';
    $('#favoriteCards').append(templateString);
});


let doc = document.querySelectorAll(".card");
doc.forEach((x)=> x.addEventListener("click",function(){
  alert(x.className);
}))

  .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="favoriteCards"></div>
  </main>

JS如何从循环单独动作创建单独的按钮？

2 个答案: