Question

当点击另一个元素（说一个链接）时，是否可以向连续的div添加一个类？

例如，假设我有这个标记;

<div class="wrapper">

    <div class="inner-div"></div> <!-- first div -->
    <div class="inner-div"></div> <!-- second div -->
    <div class="inner-div"></div> <!-- third div -->

    <a class="button clicker" href="#">Click me</a>

</div>

我想要做的是，点击.clicker链接时，我希望第一个.inner-div被赋予.show类。然后，当再次点击.clicker时，第二个.inner-div会被赋予.show类（每个新点击时每个div保持新类），依此类推。

这可能吗？

Answer 1

点击.clicker，找到没有.inner-div课程的第一个.show，然后添加.show：

$(".clicker").click(function(e){
       e.preventDefault();
       $(".inner-div:not(.show)").first().addClass("show");
});

请参阅演示：http://jsfiddle.net/mzwgg8rs/

＆＃13;

$(function(){
   
    $(".clicker").click(function(e){
   e.preventDefault();
   $(".inner-div:not(.show)").first().addClass("show");
});
    
});

＆＃13;

.inner-div
{
    width:100px;
    height:100px;
    background:blue;
}

.inner-div.show
{
    background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">

    <div class="inner-div"></div> <!-- first div -->
    <div class="inner-div"></div> <!-- second div -->
    <div class="inner-div"></div> <!-- third div -->

    <a class="button clicker" href="#">Click me</a>

</div>

＆＃13;

jQuery在点击时将类添加到连续的div

1 个答案: