如何查找动态添加的类

时间:2014-04-09 11:54:27

标签: jquery class selected

到目前为止,我有这个工作。我在Firebug中查了一下。 我在点击功能中添加了一个类.selected到单击的链接。当我点击链接#dates a的类时,更改为.selected,当我点击另一个链接时,前一个链接的类被删除,点击的链接获得一个类.selected

$( document ).ready(function() {


    $('#dates li').click(function()  { 
        $('#dates a').removeClass('selected');
        $(this).children().addClass('selected');
    }); 

此代码正在搜索链接周围列表的ID。在大多数情况下,id称为#year1943,#year1953等。我想用这个id来检查点击哪一年/有类.selected。

    function getSelectedYear() {
        return $("#dates a.selected").parent().attr('id');
    }

    $(function(){

        $('#dates li').click(function()  {
            var selectedYear = getSelectedYear(); 
            if (selectedYear == "year1943"){
                alert('The year is 1943');
            }
        });

    });

}); 

这是我的HTML标记

<ul id="dates">
    <li id="all"><a href="#all" class="selected">1943-2013</a></li>
    <li id="year1943"><a href="#1943">1943-1953</a></li>
    <li id="year1953"><a href="#1953">1953-1963</a></li>
    <li id="year1963"><a href="#1963">1963-1973</a></li>
    <li id="year1973"><a href="#1973">1973-1983</a></li>
    <li id="year1983"><a href="#1983">1983-1993</a></li>
    <li id="year1993"><a href="#1993">1993-2003</a></li>
    <li id="year2003"><a href="#2003">2003-2013</a></li>
</ul>

似乎当动态添加类.selected时,Jquery无法找出哪个链接具有类.selected。它无法注意到这些变化。我想我需要重新扫描HTML / CSS标记的东西来检查哪个链接有类.selected。

2 个答案:

答案 0 :(得分:1)

$('#dates li').click事件的侦听器上尝试make。

尝试:

     $('#dates li').click(function () {
            $('#dates a').removeClass('selected');
            $(this).children().addClass('selected');
            var selectedYear = getSelectedYear();

            if (selectedYear == "year1943") {
                alert('The year is 1943');
            }
        });


    function getSelectedYear() {
           return $("#dates a.selected").parent().attr('id');
        }

DEMO(点击1943 - 1953)

答案 1 :(得分:1)

我不确定我是否完全理解你的问题,但如果你想点击LI元素的ID,点击,你不能只使用:

 $('#dates li').click(function () {
    $('#dates a').removeClass('selected');
    $(this).children().addClass('selected');
    var selectedYear = $(this).attr("id");

    if (selectedYear == "year1943") {
        alert('The year is 1943');
    }
});

你也可以使用:

$('#dates li').on('click', function() {
    var item = $(this);
    $('#dates a').removeClass('selected');
    item.children().addClass('selected');
    if (item.attr('id') == 'year1943') {
        alert('The year is 1943');
    }
});