javascript - 获取选中项的类属性

Question

在下面的 HTML 中，当我单击任何列表项时，我想为其添加一个类.active。之后，当我单击链接时，我想获取 li 的类（不包括 .active）。

例如，通过单击第一个 li，它应该.active向其中添加类，通过单击链接，它应该获得类one。

我可以向其中添加类，但无法通过单击链接获取附加的类值。

HTML：

<ul>
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>    
</ul>

<a href="#" class="select">Check Selected </a>

jQuery：

$(document).on('click','ul li',function(e){
        $('ul li').removeClass('active');
        $(this).addClass("active");
    });

$(document).on('click','.select',function(e){
       var abc = $('ul li.active').attr('class');
         alert('Selected li class is ' + abc);    
    });

演示：http: //jsfiddle.net/n9awc/

谢谢你的帮助。

Answer 1

利用.split()

alert($('ul li.active').attr('class').split(' ')[0]);

演示

在这里，我用空格分割字符串，然后使用 . 返回第一个索引值[0]。

Answer 2

你可以这样做：

$(document).on('click', '.select', function (e) {
    var abc = $('ul li.active').attr('class').replace('active', '');
    alert('Selected li class is ' + abc);
});

演示：小提琴

---

$('ul li.active').attr('class')将返回一个包含所有类的字符串，例如one activeor two active。我们现在可以简单地active使用String.replace

Answer 3

试试这个

    <ul>
        <li class="one">One</li>
        <li class="two">Two</li>
        <li class="three">Three</li>    
    </ul>

    <a href="#" class="select">Check Selected </a>

    $('ul').on('click','li',function(){
// in case of if some li element has the active class, left quit
$('li .active').removeClass('active')
        $(this).addClass("active');
    })


    $('.select').click(function(){
  alert("You've click" + $('.active').text())
    })

Answer 4

为什么不将类保存到变量中？

$(document).on('click','ul li',function(e){
    var thisClass = $(this).attr('class');

    $('ul li').removeClass('active');
    $(this).addClass("active");
});