通過檢查 Span 文本將 CSS 類添加到 Div

Question

如果該 div 內的跨度為“是”，您如何將 css 類添加到第一個 div（見下文）。 這個 div 沒有 id。 你如何搜索這個div並修改。

<div class="dx-button dx-button-normal dx-widget dx-button-has-icon dx-button-has-text" role="button" aria-label="Yes" tabindex="0">
  <div class="dx-button-content">
    <span class="dx-button-text">Yes</span>
  </div>
</div>

Answer 1

這個怎么樣？

var dxBtnText = document.querySelector('.dx-button-text').textContent;

if (dxBtnText == 'Yes') {
    document.querySelector('.dx-button').classList.add('new-class-name');
}

Answer 2

我無法將DevExtreme css應用於按鈕，我嘗試使用<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" />但它不會加載，但理論上下面的代碼應該可以工作：

 let btnElement = $('.dx-button'); let btnText = $(".dx-button-text").text(); console.log(btnText) if (btnText == 'Yes') { btnElement.addClass("dx-button-yes"); }

 .dx-button-yes { background-color: lightBlue !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- dunno how to include DevExtreme in order to have your css --> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" /> <div class="dx-button dx-button-normal dx-widget dx-button-has-icon dx-button-has-text" role="button" aria-label="Yes" tabindex="0"> <div class="dx-button-content"> <span class="dx-button-text">Yes</span> </div> </div>

Answer 3

var dxBtnText = document.querySelectorAll(".dx-button-text");

dxBtnText.forEach(element => {
    if (element.innerText == "Yes") {
         element.parentNode.parentNode.classList.add("your-new-class-name");
    }
});