Question

通过AJAX和PHP的组合，我将一些文本数据放在页面底部的范围内。现在我想在这个文本中搜索一个字符串。我的页面中有很多复选框，它们的值是我要搜索的字符串。

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

我的代码到目前为止：我的表格中有一个复选框，全部都是以＃34;评论＆＃34;每个都有唯一的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将搜索值＆＃34;评论。＆＃34;在页面上。如果找到，复选框标签会将CSS样式颜色添加为红色。

不知何故，我想结合这些想法，但有很多问题。如何在此循环中通过ID获取元素？ window.find可以在我的span中搜索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 添加了一个功能，但我不确定是否需要这个功能。如果单击（也）时发现文本，它将改变标签的颜色。

以下是一个小例子：

＆＃13;

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";
        }
      }
    }
  }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: