如何使用jquery在同一类名不同的数据id中插入html

Question

我刚接触jquery时遇到了一个简单的问题。我有一个条件，其中存在相同的类但不同的类名。现在，当数据id为true时，我需要显示一个html，当数据id为false时，需要显示另一个html。我的代码是：

<div class="emailSent" data-id="True"></div>
<div class="emailSent" data-id="False"></div>
<div class="emailSent" data-id="False"></div>

我的jquery代码是：

if ($(".emailSent").attr("data-id") == "True") {
$(".emailSent").html("✔️")
} else {
$(".emailSent").html("❌")
}

在尝试上面的代码时，我总是得到第一个div的html。我该怎么做？

https://jsfiddle.net/u1j9hatc/

Answer 1

您需要loop到class，因为存在多个具有相同名称的class

$('.emailSent').each(function(){
if($(this).data('id') == "True"){
$(this).html("✔️");
} else {
$(this).html("❌");
}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emailSent" data-id="True"></div>
<div class="emailSent" data-id="False"></div>
<div class="emailSent" data-id="False"></div>

Answer 2

$(".emailSent")返回多个元素(3(，这些元素的类为emailSent。

您需要使用.each()循环浏览它们

更多信息：https://api.jquery.com/each/

Answer 3

您是否试图在falsediv上设置红十字，在true上设置绿色复选标记？

然后，您可以在使用数据id选择器的同时简单地选择这些类，并执行以下操作：

$(".emailSent[data-id='False']").html("❌")
$(".emailSent[data-id='True']").html("✔️")

在这里，我们选择所有数据id为"False"或"True"的emailSend类，并更改它们的html内容。

我们可以循环遍历每个.emailSent并做类似的事情，但由于jQuery修改了所选each元素的html，所以这样做要简单得多。

你可以试试：https://jsfiddle.net/mxyapL4r/