JQuery

Question

我正在尝试为我们网站上的产品添加架构标记，但我希望 div 元素的属性根据内部文本的内容进行更改HTML

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");
};

Answer 1

为什么不只是

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

正如@Barmer 评论的那样

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

Answer 2

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>

Answer 3

如果此 class 包含多个 DOM 元素，则需要使用循环。您可以使用 .each() 来遍历所有元素，或者利用 .attr() 可以被赋予一个函数作为值参数的事实，它会自动循环。调用函数时 this 等于 DOM 元素，其 return 值用作新属性。

$("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 属性。因此，而不是 itemprop，它应该是 data-itemprop。在 jQuery 中，您可以为此使用 .data()（它会自动以相同的方式循环）。

您不能使用 document.find(selector)。它需要是 $(document).find(selector)，因为 find() 是 jQuery 方法，而不是 DOM 方法。但这更简单地写成 $(selector)

Answer 4

尝试$("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>

JQuery - 根据元素 innerHTML 更改 attr

JQuery - Change attr based on element innerHTML

javascript

attr