使用其内容定位按钮

Question

我有两个按钮class但内容不同

<a class="button ordrViewBtn">Sold Out</a>
<a class="button ordrViewBtn">Re-Sell</a>

我想更改“售罄”按钮的颜色。是否可以使用其内容定位按钮？

Answer 1

<a class="button ordrViewBtn" id="ordrViewBtn">Sold Out</a>

alert($("#ordrViewBtn").text());

Answer 2

你可以这样做

更新代码；

CASE-1：如果你只希望所有按钮都被着色

const buttons = document.querySelectorAll("a.ordrViewBtn");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].style.color = "green";
}

      <a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Button3</a>
      <a class="button ordrViewBtn">Button4</a>

CASE-2：如果您只想 Sold Out 个按钮着色

const buttons = document.querySelectorAll("a.ordrViewBtn");


for (let i = 0; i < buttons.length; i++) {

  if (buttons[i].innerHTML === "Sold Out") 
{
  buttons[i].style.color = "green";
  buttons[i].style.backgroundColor = "yellow";
}
}

<a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Sold Out</a>
      <a class="button ordrViewBtn">Re-Sell</a>
      <a class="button ordrViewBtn">Sold Out</a>

使用其内容定位按钮

Target a button with its content

html

css

button

更新代码；