jQuery如何替换href的className并单击该同时运行该功能答案

【问题标题】：jQuery how to replace className of a href and click that sametime to run the functionjQuery如何替换href的className并单击该同时运行该功能
【发布时间】：2011-05-02 09:00:59
【问题描述】：

我有一个href链接如下

<a href="#" class="add_encounter">Add</a>

在$(document).ready我运行这个函数如下

$('.add_encounter').click(function(event) {
    add_encounter(encounters); 
    event.preventDefault();
});

在 add_encounter 函数上，我将 ahref 的类名从 add_encounter 更改为遇到 meetSubmitter 并希望单击它以运行其他函数，但是当我单击链接它运行函数并将类名更改为遇到提交者并更改回相同的类，即 add_enounter

function add_encounter(encounters) {
     if ($('.add_encounter').text() == "Add"){        
        $('.add_encounter').removeClass().addClass("encounterSubmitter")
     } 
    $('.encounterSubmitter').click(function(event) {save(); event.preventDefault();}); 
}

保存功能如下

  function save() {
    var encounter = $('#name').val();
    var key = $('#encounterKey').val();
    if (key == '') {
      key = null
    }
   if (encounter == ''){
 cancel_encounter() 
   }
}

cancel_encounter如下

function cancel_encounter() {     
        $('.encounterSubmitter').removeClass().addClass("add_encounter")
        $('.add_encounter').text("Add")         
}

所以它去保存函数检查if条件并去cancel_encounter函数并将类名改回 add_encounter

我知道这个问题有点令人困惑，但我希望理解它或曾经遇到过这种问题能够给我解决方案。

【问题讨论】：

标签： jquery click classname

【解决方案1】：

HTML

<a href="#" class="add my_encounter">Add</a>

$('.my_encounter').bind('click', function(event) {

    if ((this).hasClass('add')){ //add_encounter
      //encounters ???
      $(this).removeClass('add').addClass("submitter")

    }
    else if ((this).hasClass('submitter')){  // save
      var encounter = $('#name').val(),
          key = $('#encounterKey').val();

      if (key == '') {
         key = null
      }
      if (encounter == ''){
        // cancel_encounter
        $(this)
           .removeClass("submitter")
           .addClass("add")
           .text("Add"); //?? where remove text "Add"
      }

    }

    event.preventDefault();
});

【讨论】：

我使用了你的技术，但这里的问题是，如果遇到不是如下所示的空白，我正在使用保存功能来保存值
$('.my_encounter').bind('click', function(event) { if ($(this).hasClass('add')){$("#encountersList"). slideUp("slow").hide();$(".encounterForm").show("slow");$('.encounterbutton').text("Cancel") $(this).text("Save" ) $('#top-half-header').text("Add Encounter")$(this).removeClass('add').addClass("submitter")} else if($(this).hasClass(' submitter')){var 遭遇 = $('#name').val(),key = $('#encounterKey').val();if (key == '') {key = null}if (encounter == ''){$(this.removeClass("submitter").addClass("add").text("+"); }else{encounters.save(key, meet);} } event.preventDefault() ; });
所以在这种情况下，如果 $(.my_counter) 第二次点击，它会保存两次遭遇。

【解决方案2】：

无法对此进行测试，但也许这会起作用：

    $('.add_encounter').click(function(event) {
        add_encounter(encounters); 
        event.preventDefault();
    });

    function add_encounter(encounters) {
         if ($('.add_encounter').text() == "Add"){        
            $('.add_encounter').removeClass().addClass("encounterSubmitter")
         } 
    }

    $('.encounterSubmitter').live('click',function(event){
        save();
        event.preventDefault();
    });

    function save() {
        var encounter = $('#name').val();
        var key = $('#encounterKey').val();
        if (key == '') {
            key = null
        }
        if (encounter == ''){
            cancel_encounter() 
       }
    }

    function cancel_encounter() {     
        $('.encounterSubmitter').removeClass().addClass("add_encounter")
        $('.add_encounter').text("Add")         
    }

问题是您的 add_encounter 函数调用了 save 函数。因此，他会检查您的密钥，然后调用 cancel_encounter 函数重置链接。

即使要绑定的元素是在加载 javascript 之后加载的，实时调用也将起作用。

【讨论】：