文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jquery在同一类名不同的data-id中插入html？

问如何使用jquery在同一类名不同的data-id中插入html？
EN

Stack Overflow用户

提问于 2020-08-27 19:05:26

回答 3查看 46关注 0票数 0

作为jquery的新手，我面临着一个简单的问题。我有一个条件，有相同的类但不同的className。现在，我需要在data-id为true时显示一个html，在data-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("&#10004;&#65039;")
} else {
  $(".emailSent").html("&#10060;")
}

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

https://jsfiddle.net/u1j9hatc/

javascript

html

jquery

jquery-ui

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-08-27 19:11:25

您需要通过class执行loop操作，因为存在多个同名class

$('.emailSent').each(function(){
    if($(this).data('id') == "True"){
        $(this).html("&#10004;&#65039;");
    } else {
        $(this).html("&#10060;");
    }
    
});

<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>

票数 1

Stack Overflow用户

发布于 2020-08-27 19:10:11

$(".emailSent")返回具有类emailSent的多个元素(3)。

您需要使用.each()遍历它们

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

票数 1

Stack Overflow用户

发布于 2020-08-27 19:11:32

您是否正在尝试在false div上设置一个红色十字，在true上设置一个绿色复选标记？

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

$(".emailSent[data-id='False']").html("&#10060;")
$(".emailSent[data-id='True']").html("&#10004;&#65039;")

在这里，我们选择data-id='False‘或'True’的所有emailSend类，并更改它们的html内容。

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63614657

复制

相似问题

问如何使用jquery在同一类名不同的data-id中插入html？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery在同一类名不同的data-id中插入html？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery在同一类名不同的data-id中插入html？
EN