如何使用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>