添加一個類如果某些文本存在

Question

我是新來這個網站和新的jQuery，所以我applogise，如果我這樣做是錯誤的。

我在一個系統上工作，我沒有完整的代碼訪問，所以我不得不使用jQuery來影響一些視覺效果。

如果某個文本存在，我希望改變按鈕的顏色（通過添加一個額外的類）。這是我迄今所做的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
    if ($('#VALID_VAR_264 > div.validationError:contains("Required")').length > 0) { 
     $("#ccbutton").addClass("thisClass"); 
    } 
</script> 

所以基本上驗證總是有「必要」這個詞，如果它被觸發。這是相關的頁面代碼。正如我所說的，我沒有對這種控制權，所以必須與我所得到的一致。

<a onclick="javascript:animatedcollapse.toggle('div2');"> 
    <div id="ccbutton" class="ccbutton">View text options</div> 
</a> 
<div id="div2" class="cccontent"> 
    <div id=DIV_10828 class='Form_Header'> 
    <p class='Form_Header'>Headers & body text </p> 
     <script language="javascript"> 
     FieldIDs["HeaderHeader"] = 10828; 
     </script> 
    <div class='validationError' style='display:none' id='VALID_VAR_10828'> 
    </div> 
    </div> 
    <div id=DIV_168 class=''> 
    <p class=''>Enter a header</p> 
    <p> 
     <textarea rows=2 id='FIELD_168' name='FIELD_168' style='width: 200px; '>The activity, event or service header can go here. </textarea> 
    </p> 
    <script language="javascript"> 
     FieldIDs["Header"] = 168; 
    </script> 
    <div class='validationError' style='display:none' id='VALID_VAR_168'>  
    </div> 
    </div> 
    <div id=DIV_264 class='Form_Normal'> 
    <p class='Form_Normal'>Enter a subheader</p> 
    <p> 
     <textarea rows=2 id='FIELD_264' name='FIELD_264' style='width: 200px; '></textarea> 
    </p> 
    <script language="javascript"> 
     FieldIDs["Description"] = 264; 
    </script> 
    <div class='validationError' id='VALID_VAR_264'>Required</div> 
    </div> 
</div> 

Answer 1

正如在您的問題的評論中，你試圖引用的ID和類是相同的元素。我做了一個片段，相應地修改你的選擇器。

if ($('#VALID_VAR_264.validationError:contains("Required")').length > 0) { 
 
$("#ccbutton").addClass("thisClass"); 
 
}

#ccbutton{ 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 
.thisClass{ 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a onclick="javascript:animatedcollapse.toggle('div2');"><div id="ccbutton" class="ccbutton">View text options</div></a><div id="div2" class="cccontent"><div id=DIV_10828 class='Form_Header'><p class='Form_Header'>Headers & body text </p> 
 
<div class='validationError' style='display:none' id='VALID_VAR_10828'></div> 
 
</div> 
 
<div id=DIV_168 class=''><p class=''>Enter a header</p><p><textarea rows=2 id='FIELD_168' name='FIELD_168' style='width: 200px; '>The activity, event or service header can go here. </textarea></p> 
 
<div class='validationError' style='display:none' id='VALID_VAR_168'>  
 
</div> 
 
</div> 
 
<div id=DIV_264 class='Form_Normal'><p class='Form_Normal'>Enter a subheader</p><p><textarea rows=2 id='FIELD_264' name='FIELD_264' style='width: 200px; '></textarea></p> 
 
<div class='validationError' id='VALID_VAR_264'>Required</div> 
 
</div>