Question

所以，我正在尝试创建循环通过某些颜色的块。每种颜色都由一个类定义，我删除某个类颜色，然后在单击一个块时添加另一个类颜色。每段代码如下所示：

//Function 1
$('.blue').click(function(){
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
}); 

//Function 2
$('.green').click(function(){
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
});

第一次单击某个块时，颜色会发生变化。但是当我再次点击它时，颜色不会改变。

我添加了console.log语句来监控Console中发生了什么。例如，当我单击具有blue类的框时，它会添加green类，并删除blue类。但是当我点击同一个框（现在是绿色）时，我希望第二个功能运行，并且框会变成黄色。但是，我通过控制台看到的是第一个功能是试图再次运行。

我检查了HTML，并且这些类确实发生了变化。

我的问题是，当第一个框不再是blue类的成员时，为什么触发函数1？它不应该调用函数2，因为它现在是green类的成员吗？

CodePen是here，我正在积极研究它。 CodePen工作时我会在这里提到。

** CodePen现在有效，我用$(document).on('click', '.green')代替$('.green).click() **

谢谢！

Answer 1

由于您希望根据更改的选择器更改事件处理程序，因此需要使用事件委派。

//Function 1
$(document).on('click', '.blue', function () {
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
});

//Function 2
$(document).on('click', '.green', function () {
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
});

在您的事件注册中，选择器仅在加载页面时进行一次评估，之后对类进行的任何更改都不会影响注册的处理程序。

代码段示例

＆＃13;

$(document).on('click', '.blue', function () {
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
});

//Function 2
$(document).on('click', '.green', function () {
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
});

$(document).on('click', '.yellow', function () {
    console.log("Yellow has been clicked");
    $(this).addClass('blue');
    $(this).removeClass('yellow');
});

$(document).on('click', '.red', function () {
    console.log("Red has been clicked");
    $(this).addClass('blue');
    $(this).removeClass('red');
});

＆＃13;

.block{
	display: inline-block;
	width: 200px;
  height: 100px;
}

.green{
	background-color: green;
}

.blue{
	background-color: blue;
} 

.yellow{
	background-color: yellow;
}

.red{
	background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='block green'></div>
<div class='block blue'></div>
<div class='block yellow'></div>
<div class='block red'></div>

＆＃13;

Answer 2

使用on代替click，因为您正在更改div的类，因此您必须使用.on()来更改click事件绑定类

//Function 1
$(document).on('click', '.blue', function(){
    console.log("Blue has been clicked");
    $(this).addClass('green');
    $(this).removeClass('blue');
}); 

//Function 2
$(document).on('click', '.green', function(){
    console.log("Green has been clicked");
    $(this).addClass('yellow');
    $(this).removeClass('green');
});

fiddle

Answer 3

您要做的是：http://jsfiddle.net/drxzLqrL/1/

 $(document).ready(function(){
    function foo($elm){
        var color = $elm.data('color');
        switch (color) {
            case 'blue':
                $elm.addClass('green')
                    .removeClass('blue')
                    .data('color', 'green');
                break;
            case 'green':
                $elm.addClass('yellow')
                        .removeClass('green')
                        .data('color', 'yellow');
                break;
            case 'yellow':
                $elm.addClass('red')
                    .removeClass('yellow')
                    .data('color', 'red');
                break;
            case 'red':
                $elm.addClass('blue')
                    .removeClass('red')
                    .data('color', 'blue');
        }
    }
    $('.block').on('click', function(e){
        foo($(e.currentTarget));
    }); 
});

同时使用.on()代替.click()，因为您必须在更改类时获取事件，.on()为您提供.bind（）和.live的所有功能（）

我希望它有所帮助！：）

Answer 4

您想使用jQuery的.on（）而不是基本的事件绑定： https://api.jquery.com/on/

Answer 5

在这种情况下，您只需要使用toggleClass。

FIDDLE

Answer 6

这些点击只绑定到元素一次，因此当您更改类时它们不会存在。而是将click事件绑定到'block'类。您可能还想用开关或if / else来更有效地写这个。

$(document).ready(function(){
   $('.block').click(function(){
    if($(this).hasClass('blue'))
        {                   
            $(this).addClass('green').removeClass('blue');
        }
    else if($(this).hasClass('green'))
        {
            $(this).addClass('yellow').removeClass('green');
        }
    else if($(this).hasClass('yellow'))
        {
            $(this).addClass('red').removeClass('yellow');
        }
    else if($(this).hasClass('red'))
        {
            $(this).addClass('blue').removeClass('red');
        }

    $('.block').click(function(){
        console.log("Block has been clicked");
    });
 });
});

您可以在此处查看： http://codepen.io/anon/pen/pvGPyx

Answer 7

让我们在这里做些不同的事情。我们将在函数上使用bind - 在执行之前 - 传入一个对象参数，函数的范围（this）是在匿名函数中处理的实例，或者事件委托处理程序。

＆＃13;

//Common Function
function ChangeState(state, evArg)
{
  console.clear();
  console.log("this: %o, state: %o, evArg: %o", this, state, evArg);
  $(this).addClass(state.new);
  $(this).removeClass(state.old);
}

//Function 1

$(document).on("click", ".blue", function(evArg){
  ChangeState.bind(this,{"old":"blue","new":"yellow"}, evArg)();
});


$(document).on("click", ".yellow", function(evArg){
  ChangeState.bind(this,{"old":"yellow","new":"red"}, evArg)();
});

$(document).on("click", ".red", function(evArg){
  ChangeState.bind(this,{"old":"red","new":"green"}, evArg)();
});


$(document).on("click", ".green", function(evArg){
  ChangeState.bind(this,{"old":"green","new":"blue"}, evArg)();
});

＆＃13;

.block{
	display: inline-block;
	width: 200px;
  height: 100px;
}

.green{
	background-color: green;
}

.blue{
	background-color: blue;
} 

.yellow{
	background-color: yellow;
}

.red{
	background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='block green'></div>
<div class='block blue'></div>
<div class='block yellow'></div>
<div class='block red'></div>

＆＃13;

JQuery没有删除类？

7 个答案:

代码段示例