Question

我是这个网站的新手，也是jQuery的新用户，所以如果我做错了，我就会报告。

我正在开发一个我没有完全代码访问权限的系统，因此我不得不使用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>

如果存在某些文本，请添加一个类

1 个答案: