JQuery -根据元素innerHTML更改属性

JQuery - Change attr based on element innerHTML

本文关键字：属性 innerHTML 元素 -根 JQuery      更新时间：2023-09-26

我试图在整个网站的产品中添加模式标记，但我希望div元素的attr根据innerHTML

的文本更改HTML: 

<div class="badgeIds" itemtype="https://schema.org/ItemAvailability" itemprop="availability">
   Online Only
</div>

这是我为Javascript编写的内容。我的逻辑有问题吗?

var avail = document.find("div.badgeIds");
if (avail.html().trim() == "Preorder") {
      avail.attr("itemprop", "availability:Preorder");
} elseif (avail.html().trim() == "Online Only") {
      avail.attr("itemprop", "availability:OnlineOnly");
} elseif (avail.html().trim() == "Available In Store Only") {
      avail.attr("itemprop", "availability:InStoreOnly");
};


var avail = $("div.badgeIds");
var txt = $("div.badgeIds").text().trim();
 
if (txt == "Preorder") {
      avail.attr("itemprop", "availability:Preorder");
} else if (txt == "Online Only") {
      avail.attr("itemprop", "availability:OnlineOnly");
} else if (txt == "Available In Store Only") {
      avail.attr("itemprop", "availability:InStoreOnly");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div class="badgeIds" itemtype="https://schema.org/ItemAvailability" itemprop="availability">
   Online Only
</div>

为什么不直接

avail.attr("itemprop", "availability:" + avail.html().replace(/'s|Available/g, "");

正如@Barmer评论的

var avail = $("div.badgeIds");

如果该类中有多个DOM元素，则需要使用循环。您可以使用.each()来循环遍历所有元素，或者利用.attr()可以作为值参数给定函数的事实，并且它将自动循环。函数调用时，this等于DOM元素，其返回值作为新属性。

$("div.badgeIds").attr("itemprop", function() {
    var html = $(this).html().trim();
    switch (html) {
        case "Preorder":
            return "availability:Preorder";
            break;
        case "Online Only":
            return "availability:OnlineOnly";
            break;
        case "Available In Store Only":
            return "availability:InStoreOnly";
            break;
        default:
            return "";
    }
});

顺便说一句，你不应该这样创建你自己的属性。如果需要特定于应用程序的属性，请使用标准的data-XXX属性。所以应该是data-itemprop而不是itemprop。在jQuery中，你可以使用.data()来实现这一点(它会以同样的方式自动循环)。

你不能使用document.find(selector)。它需要是$(document).find(selector)，因为find()是一个jQuery方法，而不是DOM方法。更简单的写法是$(selector)

试试$("div.badgeId");

一些代码改进是我的观点。

var avail = $("#badgeId");
var text = avail.html().trim();
if (text  == "Preorder") {
      avail.attr("itemprop", "availability:Preorder");
} else if (text  == "Online Only") {
      avail.attr("itemprop", "availability:OnlineOnly");
} else if (text  == "Available In Store Only") {
      avail.attr("itemprop", "availability:InStoreOnly");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="badgeId" class="badgeIds" data-itemtype="https://schema.org/ItemAvailability" data-itemprop="availability">
   Online Only
</div>

相关文章：