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 变量，并且由于闭包的事情它会给您带来一些问题我上面提到过）