如何根据 JQuery 的文本值将不同的属性分配给相同 class 的多个元素

Question

例如：

我有多个 <span> 元素，其中 .listing-text 的 class 表示 Available，有些表示 Pending，有些表示 Sold.

我想为 Available、yellow 到 Pending 和 red 到 [=] 的背景分配 green 17=].

我尝试了一些不同的 for 循环等等。到目前为止，我所能做的只是将每个框都变成绿色，我认为那是因为我没有正确迭代。我似乎唯一能做对的是

$('.listing-text').css('background-color','green');

它可靠地将所有背景更改为绿色。

如有任何帮助，我们将不胜感激。

Answer 1

您似乎无法编写匹配元素文本 () 的 css 选择器。

您可以遍历整组列表并为每个类别添加另一个 class。所以所有人都会 .listing-text 但有些会 .listing-available 或 .listing-pending。从那里你可以像你发布的那样编写你的 jquery 函数。

Answer 2

查看评论：

// Get all the listings and loop over them
document.querySelectorAll(".listing-text").forEach(function(listing){
  // Check the text of the span for the possible choices and
  // apply the appropriate CSS class
  switch (listing.textContent) {
    case "Available":
      listing.classList.add("available");
      break;
    case "Pending":
      listing.classList.add("pending");
      break;
    case "Sold":
      listing.classList.add("sold");
      break;       
  }
});

.available { background-color:green; }
.pending { background-color:yellow; }
.sold { background-color:red; }

<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>

Answer 3

使用 jQuery 的 .each 函数尝试以下操作。

$('.listing-text').each(function() {
    let listText = $(this).text()
    switch (listText) {
        case 'Pending':
            $(this).addClass('pending')
            break
        case 'Sold':
            $(this).addClass('sold')
            break
        case 'Available':
        default:
            $(this).addClass('available')
            break
    }
})

.available {  background-color: green  }
.pending {  background-color: yellow  }
.sold {  background-color: red  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="listing-text">Available</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Pending</span>

我在这里所做的是遍历每个列表文本元素，获取文本，并根据其文本值应用 class。

如何根据 JQuery 的文本值将不同的属性分配给相同 class 的多个元素

How assign differing attributes to multiple elements of the same class based on text value with JQuery

javascript

css

jquery

attributes

selector