如何使用window.find更改CSS样式？

Question

通过AJAX和PHP的组合，我将一些文本数据放在页面底部的跨度中。 现在，我想在此文本中搜索字符串。 我的页面上充满了复选框，它们的值是我要搜索的字符串。

目标：使用循环，循环浏览页面上所有复选框的值。 在页面上搜索每个复选框的值（最好在AJAX通知范围内的文本内）。 如果找到了复选框的值，请更改该复选框的CSS样式颜色。

到目前为止，我的代码：我有一个充满复选框的表单，所有复选框均名为“注释”，每个复选框均具有唯一的ID：

<input type="checkbox" name="comment" id="hjl1" value="the comment." 
 onclick="createOrder()"><label for="hjl1" onclick="createOrder()" 
 title="comment"> onscreen text for this checkbox </label>

当使用Javascript触发时，我会检查该表单中的每个复选框。

var comment=document.forms[0].comment;
var txt="";
var ii;
for (ii=0;ii<comment.length;ii++)
  {str=comment[ii].value;}

现在，我想在该循环中插入window.find，以检查该值是否在我的页面上。

 if (window.find) {
            var found = window.find (str);
            if (!found) { 
         document.getElementById("?????").style["color"] = "red";
           }
        }

想法是，当选中此复选框时，javascript将搜索值“ comment”。 在页面上。 如果找到，复选框标签将添加CSS样式红色。

我想以某种方式将这些想法结合起来，但是有很多问题。 如何在此循环中按ID获取元素？ window.find可以在我的范围内搜索php创建的文本吗？

根本不使用window.find会更好吗？

var source = document.getElementsByTagName('html')[0].innerHTML;
var found = source.search("searchString");

我是如此的困惑和陌生。 请耐心等待。 感谢您阅读本文。

Answer 1

试试这个作为你的功能代码

function loopy() {  
   var comment=document.forms[0].comment;
   var txt="";
   var ii;
   for (ii=0;ii<comment.length;ii++) {
    if (comment[ii].checked) {
        str=comment[ii].value;
        id = comment[ii].id;

        nextLabelId = comment[ii].nextSibling.id;


        if (window.find) {        // Firefox, Google Chrome, Safari
            var found = window.find (str);
            if (found == true) {
                // found string
                //comment[ii].style['outline']='1px solid red'; 
                document.getElementById(nextLabelId).className = 'selected';                
           } 
        } else {
            // this browser does not support find()
            alert('not supported');
        }
    }
  }
}

因此，为了获取复选框ID，只需在循环中添加id = comment[ii].id 。

要更改颜色，最好在CSS文件中使用类名并使用样式。 因此，如果要将复选框后的标签更改为红色，将首先使用nextSiblings查找标签的ID，然后添加.selected类名称。 请记住，如果用户取消选中该框，则需要删除颜色

关于find()的用法，并非所有浏览器都支持，因此这可能是一个问题，并且不确定它是否能够在您通过AJAX注入DOM的内容上找到，因此需要进行一些测试。

我建议将此代码移至jQuery，因为某些功能似乎更易于使用它们的功能。

Answer 2

一开始我误会了，并编写了代码以突出显示页面中的文本。

是的，因为您只需要知道该值是否存在，就可以将window.find用于此目的。 但是，在帧中使用时，它可能表现得有些奇怪（滚动到底部）。

另外，我为您的onClick添加了一个功能，但不确定是否需要此功能。 如果在单击时也找到了文本，它将更改标签的颜色。

下面是一个小例子：

 function checkThis(ele) { var str = ele.value; if (window.find) { var found = window.find(str); if (found) { var id = ele.getAttribute('id'); var lbl = document.querySelectorAll('label[for="' + id + '"]'); if (lbl) lbl[0].style.color = "red"; } } } window.onload = function() { var comment = document.form1.getElementsByTagName('input'); for (var x = 0; x < comment.length; x++) { if (comment[x].type == 'checkbox') { var str = comment[x].value; if (window.find) { var found = window.find(str); if (found) { var id = comment[x].getAttribute('id'); var lbl = document.querySelectorAll('label[for="' + id + '"]'); if (lbl) lbl[0].style.color = "red"; } } } } } 

 <form name="form1"> <input type="checkbox" name="comment" id="hjl1" value="the comment." onclick="checkThis(this);" /> <label for="hjl1" onclick="createOrder()" title="comment">onscreen text for this checkbox</label> <input type="checkbox" name="comment" id="hjl2" value="the comment2." onclick="checkThis(this);" /> <label for="hjl2" onclick="createOrder()" title="comment">onscreen text for this checkbox</label> <br/> <b>first comment.</b><br/> <b>other comment.</b><br/> <b>some comment.</b><br/> <b>the comment.</b><br/> <b>whatever comment.</b><br/> <b>not this comment.</b><br/> </form>