AJAX：對 CSS class 應用效果

Question

我有一段代碼將突出顯示效果應用於菜單中的列表項（由於菜單項只是 POST 的事實），以向用戶提供反饋。 我已經為菜單創建了第二步，並希望將其應用於具有 class of.highlight 的任何元素。 但無法讓它工作，這是我當前的代碼：

[刪除舊代碼]

顯而易見的解決方法是創建一個新 id（例如，'#highlighter2），然后復制並粘貼代碼。 但我很好奇是否有更有效的方法將效果應用於 class 而不是 ID？

更新（這是我更新的代碼）：

上面的腳本確實適用於第一個 ul。 第二個 ul，通過 jquery 出現（也許這就是問題所在，它最初設置為隱藏）。 這是相關的 HTML （有點要理解，但請注意隱藏的第二個 div。我認為這可能是罪魁禍首。就像我說的，第一個列表完美無缺，亮點和所有。但第二個列表什么也沒做。）？

//Do something when the DOM is ready:

<script type="text/javascript">
$(document).ready(function() {

$('#foo li, #foo2 li').click(function() {
    // do ajax stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

//When a link in div is clicked, do something:
$('#selectCompany a').click(function() {
    //Fade in second box:

    //Get id from clicked link:
    var id = $(this).attr('id');


    $.ajax({
        type: 'POST',
        url: 'getFileInfo.php',
        data: {'id': id},
        success: function(msg){
            //everything echoed in your PHP-File will be in the 'msg' variable:
            $('#selectCompanyUser').html(msg)
            $('#selectCompanyUser').fadeIn(400);
        }
});
    });
});
</script>
<div id="selectCompany" class="panelNormal">
<ul id="foo">
<?
// see if any rows were returned 
if (mysql_num_rows($membersresult) > 0) { 
    // yes 
    // print them one after another 
    while($row  = mysql_fetch_object($membersresult)) { 
        echo "<li>"."<a href=\"#\""." id=\"".$row->company."\">".$row->company."</a>"."</li>";
    }  
} 
else { 
    // no 
    // print status message 
    echo "No rows found!"; 
} 

// free result set memory 
mysql_free_result($membersresult); 

// close connection 
mysql_close($link); 
 ?>

  </ul>
</div>


<!-- Second Box: initially hidden with CSS "display: none;" -->

<div id="selectCompanyUser" class="panelNormal" style="display: none;">
<div class="splitter"></div>

</div>

Answer 1

您可以只創建 #highlighter2 並將您的代碼塊變成一個 function ，它采用 ID 值，然后調用它兩次：

function hookupHighlight(id) {
    var context = document.getElementById(id);
    var items = context.getElementsByTagName('li');
    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener('click', function() {
            // do AJAX stuff

            // remove the "highlight" class from all list items
            for (var j = 0; j < items.length; j++) {
                var classname = items[j].className;
                items[j].className = classname.replace(/\bhighlight\b/i, '');
            }

            // set the "highlight" class on the clicked item
            this.className += ' highlight';
        }, false);
    }
}

hookupHighlight("highliter1");
hookupHighlight("highliter2");

jQuery 會在很多方面使這更容易，因為整個塊會崩潰：

$("#highlighter1 li, #highlighter2 li").click(function() {
    // do ajax stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

如果您在運行此 jQuery 代碼時最初不存在您想要單擊的任何對象，那么您必須改用它：

$("#highlighter1 li, #highlighter2 li").live("click", function() {
    // do ajax stuff
    $(this).siblings('li').removeClass('highlight');
    $(this).addClass('highlight');
});

Answer 2

更改/highlight/ig中的替換，它適用於http://jsfiddle.net/8RArn/

var context = document.getElementById('highlighter');
var items = context.getElementsByTagName('li');

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        // do AJAX stuff

        // remove the "highlight" class from all list items
        for (var j = 0; j < items.length; j++) {
            var classname = items[j].className;
            items[j].className = classname.replace(/highlight/ig, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight';
    }, false);
}

Answer 3

所以所有那些說只使用 jQuery 的人都在給出不好的建議。 它現在可能是一個快速修復，但它不能替代實際學習 Javascript。

Javascript 中有一個非常強大的功能，稱為閉包，它可以立即為您解決這個問題：

var addTheListeners = function (its) {
    var itemPtr;

    var listener = function () {
        // do AJAX stuff

        // just need to visit one item now
        if (itemPtr) {
            var classname = itemPtr.className;
            itemPtr.className = classname.replace(/\bhighlight\b/i, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight';
        itemPtr = this;
    }

    for (var i = 0; i < its.length; i++) {
        its[i].addEventListener ('click', listener, false);
    }
}

接着：

var context = document.getElementById ('highlighter');
var items = context.getElementsByTagName ('li');
addTheListeners (items);

您可以根據需要多次調用為不同的文檔元素集添加偵聽器。

addTheListeners 的工作原理是在每次調用時定義一個 var 來存儲列表當前選定的項目，然后在它下面定義的所有偵聽器函數即使在 addTheListeners 返回后也可以共享訪問該變量（這是閉包部分）。

由於兩個原因，此代碼也比您的代碼更有效：

1. 您不再遍歷所有項目只是為了從其中一項中刪除 class
2. 您沒有在 for 循環中定義函數（您永遠不應該這樣做，不僅是出於效率原因，而且有一天您會很想使用 i 變量，並且由於閉包的事情它會給您帶來一些問題我上面提到過）