javascript - AJAX : Applying effect to CSS class

Question

我有一段代码将突出显示效果应用于菜单中的列表项(因为菜单项只是 POST)，以向用户提供反馈。我已经为菜单创建了第二个步骤，并希望将它应用于具有 .highlight 类的任何元素。虽然无法正常工作，但这是我当前的代码:

[删除旧代码]

显而易见的解决方法是创建一个新 ID(例如，'#highlighter2)，然后复制并粘贴代码。但我很好奇是否有更有效的方法将效果应用于类而不是 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 并将您的代码块变成一个采用 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 会在很多方面使这更容易，因为整个 block 会折叠成这样:

$("#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');
});