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

Question

通过 AJAX 和 PHP 的结合，我在页面底部的一个 span 中放置了一些文本数据。现在我想在这个文本中搜索一个字符串。我的页面充满了复选框，它们的值就是我要搜索的字符串。

目标：使用循环，循环浏览页面上所有复选框的值。在页面中搜索每个复选框的值（理想情况下，在 AJAX 通知范围内的文本中）。如果找到复选框值，则更改复选框 CSS 样式颜色。

到目前为止我的代码：我有一个充满复选框的表单，所有复选框都命名为“comment”，每个都有唯一的 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 会搜索值“评论”。在页面上。如果找到，复选框标签将添加 CSS 样式颜色红色。

不知怎的，我想把这些想法结合起来，但是问题太多了。如何在此循环中按 ID 获取元素？ window.find 可以在我的 span 中搜索 php 创建的文本吗？

完全不使用window.find会更好吗？

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

我很困惑，也很陌生。请耐心等待。感谢您阅读本文。

Answer 1

一开始我误会了，写了代码来高亮页面内的文字。

是的，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>

Answer 2

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

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，因为某些功能似乎更容易使用它们的功能。