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]);

Demo

在这里，我将使用空格分割字符串，而不是使用[0]返回第一个索引值。

Answer 2

你可以这样做：

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

演示：Fiddle

$('ul li.active').attr('class')将返回包含one active或two active等所有类的字符串。我们现在可以使用String.replace

从中删除此active字符串

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");
});

获取所选项的class属性

4 个答案: