Question

这是我想到的行为：假设你有一个方格。 <div class="square"></div> 在第一次单击时，添加class＆＃34; one＆＃34;：

$(".square").click(function(){
  addClass("one");
})

它有效。

然后在第二次点击时，添加课程＆＃34;两个＆＃34;。不知道如何实现这一目标。我在下面尝试过：

 $(".square.one").click(function(){
    $(".square.one").addClass("two");
 });

和

$(".square").hasClass("one").click(function(){
   this.addClass("two");
})

但两者都不起作用。请帮忙。

Answer 1

$('.square').on('click', function() {
    var $self = $(this);
    $self.hasClass('one') ? $self.removeClass('one').addClass('two') : $self.removeClass('two').addClass('one');
});

Answer 2

试试这个

$(".square").click(function () {
    if ($(this).hasClass('one')==true) 
        {
           $(this).addClass("two");
           $(this).removeClass("one");
        }
    else 
        $(this).addClass("one")
})

＆＃13;

$(".square").click(function() {
  if ($(this).hasClass('one') == true) $(this).addClass("two");
  else $(this).addClass("one")
})

＆＃13;

.one {
  color: #00f;
}
.two {
  font-size: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='square'>fooo bar</div>

＆＃13;

Answer 3

您可以使用jQuery .filter()方法首先检查点击的元素是否包含类.one，如果是，请添加.two如果不继续。

$('.square').on('click', function() {
    $(this).filter('.one').addClass('two').end().addClass('one');
});

＆＃13;

$('.square').on('click', function() {
    //show classes
    console.log( this.className );
    $(this).filter('.one').addClass('two')
    .end().addClass('one');
});

＆＃13;

.square {
    width: 100px;
    height: 100px;
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

＆＃13;

另一种方法是使用事件委派，将$('.square.one')看作是在DOM准备好后添加的元素，但是你不想在DOM中那么高树可能会花费你。因此，您可以使用目标元素的父级而不是document：

$('.square').on('click', function() {
    $(this).addClass('one');
})
.parent().on('click', '.one', function() {
    $(this).addClass('two');
});

＆＃13;

$('.square').on('click', function() {
    $(this).addClass('one');
    //show classes
    console.log( this.className );
})
.parent().on('click', '.one', function() {
    $(this).addClass('two');
});

＆＃13;

.square {
    width: 100px;
    height: 100px;
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

＆＃13;

Answer 4

首次点击即可添加第1课。然后，如果存在第一类，则删除它并添加第2类。如果存在第2类，则删除然后重新开始。如果你想要一个例子，我可以快速写一个。例如：

    $(".square").click(function(){
        var $this = $(this);
        //see where we are currently at
        if($this.hasClass("two")){
           //then we are on a third click 
        }
        else if($this.hasClass("one")){
         //we are on second click so add class
            $this.addClass("two");
        }
        else //we are on initital click
        {
            $this.addClass("one");
        }
   })

现在，我不知道你在第二次点击后想做什么，但希望这会给你一个想法。还有很多其他方法可以做到这一点，但这是使用当前概念的方式。

第二次单击时添加addClass

4 个答案: