使用 jQuery 或 CSS 更改类名

Question

所以我试图将我网站上的这部分代码从“产品”改为“商店”

_{问题图片以红色突出显示：}

<strong class="breadcrumb_last">Products</strong>

面包屑中的产品文本是从 >Products

我需要一种使用 CSS 或 jQuery 将其编码到我的网站的方法，因为这是一个 wordpress 网站，所以它会改变

<strong class="breadcrumb_last">Products</strong>

到

<strong class="breadcrumb_last">Shop</strong>

有什么想法吗？

谢谢，

哈维

[]

2[]3

Answer 1

对于现有的 HTML，我建议您使用以下代码：

  $(".breadcrumb_last").text("Shop");

但是，如果元素有 ID 会更好，因为冲突（更新许多元素）的机会会更低。如果你决定给你的元素一个 ID，下面的代码会很有用。

  $("#name-of-element").text("Shop");

JSfiddle 示例：https://jsfiddle.net/9k8h53t9/

Answer 2

不要使用$(".breadcrumb_last")作为选择器。
在其他页面上，您的.breadcrumb_last 可能不包含所需的Products 文本^{（参见ex.2）}

改为，以父选择器为目标（在您的特定情况下为#breadcrumbs），而不是选择a, strong children - 以确保您不会更改任何其他内容 - 但元素有"Products" 字符串。方法如下：

jQuery(function($) { // DOM ready and $ alias secured

  $("#breadcrumbs").find('a, strong').text(function(idx, txt) {
    if (txt === "Products") return "Shop";
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="breadcrumbs">

  EXAMPLE 1<br><br>

  <span>
    <span>
      <a href="#!">Home</a>
      &raquo;
      <strong class="breadcrumb_last">Products</strong>
    </span>
  </span>

  <br><br> EXAMPLE 2<br><br>

  <span>
    <span>
      <a href="#!">Home</a>
      &raquo;
      <a href="#!">Products</a> 
      &raquo;
      <strong class="breadcrumb_last">This is a product 1</strong>
    </span>
  </span>

</p>

同样，您可以使用:contains("Products")，但这也会针对像<a>Dangerous Products</a> 这样的儿童——这显然是一件危险的事情:)