如何使用 JQuery 数组将 class 添加到 li？

Question

我正在尝试编写一个脚本，当您单击 a 标签时，它会将 class 'menu-toc-current' 添加到相关的 li 元素中。（显然在单击下一个项目时删除此 class）。因此，单击 link 猫，它会将 class 添加到 li 猫等

到目前为止我的代码是...

<ul id="menu-toc">
    <li>Cat</li>
    <li>Dog</li> 
    <li>Bird</li> 
</ul>

<a class="alive">Show me Cats</a>
<a class="alive">Show me Dogs</a>
<a class="alive">Show me Birds</a>

我目前的JQuery是...

$('a.alive').click( function(){
    $('ul#menu-toc').toggleClass('menu-toc-current');
});

Answer 1

我会为每个 link 添加一个 data- 属性，引用您希望切换的 li 的编号或（更好）该元素的 ID。

$('a.alive').click(function() {
  var elnum = $(this).data('elnum');
  $('ul#menu-toc li').removeClass('menu-toc-current')
        .eq(elnum).toggleClass('menu-toc-current');
});

.menu-toc-current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-toc">
  <li>Cat</li>
  <li>Dog</li>
  <li>Bird</li>
</ul>

<a href="javascript:" class="alive" data-elnum="0">Show me Cats</a>
<a href="javascript:" class="alive" data-elnum="1">Show me Dogs</a>
<a href="javascript:" class="alive" data-elnum="2">Show me Birds</a>

http://api.jquery.com/data

但是，使用 ID 而不是数字是有利的，因为它可以更轻松地重新排列列表：

$('a.alive').click(function() {
  var elid = $(this).data('elid');
  $('ul#menu-toc li').removeClass('menu-toc-current')
        .filter('#'+elid).toggleClass('menu-toc-current');
});

.menu-toc-current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-toc">
  <li id="cat">Cat</li>
  <li id="dog">Dog</li>
  <li id="bird">Bird</li>
</ul>

<a href="javascript:" class="alive" data-elid="cat">Show me Cats</a>
<a href="javascript:" class="alive" data-elid="dog">Show me Dogs</a>
<a href="javascript:" class="alive" data-elid="bird">Show me Birds</a>

现在，如果您以后想在 "Dog" 之后移动 "Cat"，则不需要像 data-elnum 那样更改 data-elid 属性。

Answer 2

如果我理解你的问题是正确的，你可以用这样的内联代码来完成：

<ul id="menu-toc">
    <li id="cat">Cat</li>
    <li id="dog">Dog</li> 
    <li id="bird">Bird</li> 
</ul>

<a class="alive" onclick="$('cat').toggleClass('menu-toc-current')">Show me Cats</a>
<a class="alive" onclick="$('dog').toggleClass('menu-toc-current')">Show me Dogss</a>
<a class="alive" onclick="$('bird').toggleClass('menu-toc-current')">Show me Birds</a>

分离代码和标记是一种很好的做法。你可以这样做：

<ul id="menu-toc">
    <li id="cat">Cat</li>
    <li id="dog">Dog</li> 
    <li id="bird">Bird</li> 
</ul>

<a class="alive" id="cat-link">Show me Cats</a>
<a class="alive" id="dog-link">Show me Dogss</a>
<a class="alive" id="bird-link">Show me Birds</a>

<script>
    $("cat-link").click(function(){$('cat').toggleClass('menu-toc-current')});
    $("dog-link").click(function(){$('dog').toggleClass('menu-toc-current')});
    $("bird-link").click(function(){$('bird').toggleClass('menu-toc-current')});
</script>

如果您有很多链接并且不想通过像 "cat" 和 "dog" 这样的 ID 来引用每个链接，您可以这样做：

<ul id="menu-toc">
    <li id="cat" data-index="1">Cat</li>
    <li id="dog" data-index="2">Dog</li> 
    <li id="bird" data-index="3">Bird</li> 
</ul>

<a class="alive animal-link" data-index="1">Show me Cats</a>
<a class="alive animal-link" data-index="2">Show me Dogss</a>
<a class="alive animal-link" data-index="3">Show me Birds</a>

<script>
    $(".animal-link").click(function(){
        $("#menu-toc").find("[data-index='" + $(this).attr("data-index")+ "']").toggleClass("menu-toc-current");
    });
</script>

Answer 3

我认为您正在尝试制作手风琴菜单：http://jsfiddle.net/nothrem/mcgv4gok/

<nav>
    <div id="navContainer">
        <ul>
            <li>
            <a href='' class='tabButton' data-openTab='1'>1</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='2'>2</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='3'>3</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='4'>4</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='5'>5</a>
            </li>
        </ul>
    </div>
    <div id = "tabCont" class="tabContainer">
        <div id="1">1
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="2" >2
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="3" > 3
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="4" >  4
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="5" >   5
            <a href="" class="closeButton"> CLOSE </a>
        </div>
    </div>
</nav>

    document.menuIsOpen = false;
    $('.tabContainer > div').hide();
    $('.tabButton').click(function(event) {
        var
            open = $("#" + $(this).attr('data-openTab')),
            isOpened = open.is('.opened');

        event.preventDefault();
        if (document.menuIsOpen) {
            document.menuIsOpen = false;
            $('.opened').hide("slow").removeClass('opened');
        }
        if (!isOpened) {
            document.menuIsOpen = true;
            open.addClass('opened').show("slow").css("display", "block");
        }
    });
    $('.closeButton').click(function(event) {
        event.preventDefault();
        $('.opened').hide("slow").removeClass('opened');
    });
    $('.tabContainer > div').hide();

Answer 4

试试这个

 $( document ).ready(function() {

     $(".alive").click(function(){      
        var id = $(this).attr('id');
        $("ul#menu-toc li").removeClass('red');
        $("#" + id + "-li").addClass('red');
     });
     
});

.red {
    color:red;
}

<ul id="menu-toc">
    <li id="cats-li">Cat</li>
    <li id="dogs-li">Dog</li> 
    <li id="birds-li">Bird</li> 
</ul>

<a class="alive" id="cats" href="#">Show me Cats</a>
<a class="alive" id="dogs" href="#">Show me Dogss</a>
<a class="alive" id="birds" href="#">Show me Birds</a>

如何使用 JQuery 数组将 class 添加到 li？

How do I add a class to an li using a JQuery array?

javascript

arrays

jquery