jquery - 如何在单击元素时交替调用两个函数？

Question

HTML：

<ul>
   <li class='selectable'>Data</li>
   <li class='deselectable'>Data</li>
</ul>

Javascript

$(".selectable").click(function()
{
    alert("select "+$(this).prop("class"));
    //data
    $(this).removeClass('selectable').addClass('deSelectable');
});

$(".deselectable").click(function()
{
    alert("deselect "+$(this).prop("class"));
    //data
    $(this).removeClass('deSelectable').addClass('selectable');
});

当我第一次单击 li 元素时，此代码工作正常。当我第一次单击“.selectable”时，我得到“select selectable”，第二次我得到“select deselectable”而不是“deselect deselectable”。

当我单击相同的“li”元素时，如何在两种方法之间切换？

Answer 1

click仅在绑定时绑定到与选择器匹配的元素。您想on与委托事件一起使用：

$(document).on('click', '.selectable', function() { ... });
$(document).on('click', '.deselectable', function() { ... });

请注意，css 类区分大小写。deSelectable不是deselectable。

如果有一个容器将包含所有可选择和不可选择的容器，它不会被破坏并且比 更接近document，请改用它。

Answer 2

您可以在一个事件绑定中完成所有操作：

$(".selectable, .deselectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            alert("select "+$(this).prop("class"));
            //data
            $(this).removeClass('selectable').addClass('deselectable');
        } else {
            alert("deselect "+$(this).prop("class"));
            //data
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);

但是，如果您只想交换类，那么这会更好：

$(".selectable, .deselectable").click(function() {
    $(this).toggleClass('selectable deselectable');
});

Answer 3

这可以通过一个功能、一个切换而不依赖于标记来完成。

var toggle = true;    
$(".selectable,.deselectable").click(function(){
    if(toggle){
       alert("option1");
    }else{
       alert("option2");
    }
    toggle = !toggle;
 });

工作示例：http: //jsfiddle.net/2qsKp/

Answer 4

$(".selectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            $(this).removeClass('selectable').addClass('deselectable');
        } else
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);
$(".doselectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            $(this).removeClass('selectable').addClass('deselectable');
        } else
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);

Answer 5

你检查过 .toggleClass() 函数http://api.jquery.com/toggleClass/，

演示

只需查看此演示，可能会对您有所帮助。

$("li").click(function () {
      $(this).toggleClass("selectable");
    });