Question

我正在尝试使用相同的按钮来触发ajax调用，以便在单击时添加数据库条目，然后触发不同的ajax调用以删除再次单击的条目。

我尝试过使用toggleClass，虽然按钮类确实发生了变化，但它的外观也相应改变，但函数仍然认为它有旧的类名。

$(document).ready(function() { 
   $(".selected").on("click", function() {
       $(this).text(function (i, oldText) {
        return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';   
    });
       $(this).toggleClass('selected selected_btn');
   });

   $(".selected").on("click", function() {
        alert('selected');
    });
   $(".selected_btn").on("click", function() {
        alert('de selected');
    });   
});

使用当前代码，始终会选择警报＆＃39;。

Answer 1

$(document).ready(function() { 
   $(".selected_btn").on("click", function() {
       $(this).text(function (i, oldText) {
        return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';   
    });
       $(this).toggleClass('selected');
  if($(this).hasClass("selected"))
      alert("Selected")
  else 
      alert("de-Selected")
   });
 });

这是一个小提琴：

http://fiddle.jshell.net/prollygeek/3LLN2/

Answer 2

以下是有关如何执行此操作的简单易读的示例：

$(document).ready(function() {

    $('.select-img').on('click', function(){

        var $el = $(this);
        var isSelected = $el.attr('data-selected');

        if( isSelected != 'true' ){
            firstFn();
            $el.html('Use Image').attr('data-selected', true)
        }else{
            secondFn();
            $el.html('Select').attr('data-selected', false)
        }

    })

    var firstFn = function(){
        alert('first thing to do');
    }

    var secondFn = function(){
        alert('second thing to do');
    }

})

Demo

Answer 3

使用*Class个功能：

工作代码：

$("a").on("click", function() {
    if($(this).hasClass("bob")) {
        // do delete
        alert("delete");
        $(this).removeClass("bob");
    } else {
        // do insert
        alert("insert");
        $(this).addClass("bob");
    }
});

Demo

Answer 4

 $(".selected").on("click", function() {
    alert('selected');
 });

覆盖你放在文档开头的事件。我想。（可能不是真的，但我认为是）

使用相同的按钮触发两个不同的JQuery事件

4 个答案:

Demo

Demo