代码之家 › 专栏 › 技术社区 › Sammy I.

JQuery没有删除类?

stylesheet css html jquery javascript

Sammy I. · 技术社区 · 9 年前

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

//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 类,以及 蓝色 类被删除。但当我单击同一个框(现在是绿色)时,我希望第二个函数运行,并且该框将变为黄色。然而,我通过控制台看到的是,第一个功能正在尝试再次运行。

我检查了HTML,类确实发生了变化。

我的问题是,当第一个框不再是 蓝色 班它不应该调用函数2,因为它现在是 绿色 班

CodePen是 here ,我正在积极研究。我将在这里提到CodePen何时工作。

**CodePen现在可以用了 $(document).on('click', '.green') 而不是 $('.green).click() **

非常感谢。

7 回复 | 直到 9 年前

Brett Caswell 9 年前

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

//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');
});

在事件注册中,选择器仅在加载页面时求值一次,之后对类所做的任何更改都不会影响已注册的处理程序。

代码段示例

$(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');
});

.block{
	display: inline-block;
	width: 200px;
  height: 100px;
}

.green{
	background-color: green;
}

.blue{
	background-color: blue;
} 

.yellow{
	background-color: yellow;
}

.red{
	background-color: red;
}

<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>

Fares M. 9 年前

使用 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

gon250 9 年前

您要做的是: 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()的所有功能

我希望这有帮助!:)

marcus.kreusch 9 年前

您希望使用jQuery的.on()而不是基本事件绑定: https://api.jquery.com/on/

Patrick 9 年前

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

FIDDLE

sbatson5 9 年前

这些单击只绑定到元素一次,因此当您更改类时,它们不会出现在那里。相反,将单击事件绑定到“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

Brett Caswell 9 年前

让我们在这里做一些不同的事情。我们将使用 bind 在执行函数之前,在函数上传递对象参数和函数的范围( this )是在匿名函数或事件委托处理程序中处理的实例。

//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)();
});

.block{
	display: inline-block;
	width: 200px;
  height: 100px;
}

.green{
	background-color: green;
}

.blue{
	background-color: blue;
} 

.yellow{
	background-color: yellow;
}

.red{
	background-color: red;
}

<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>