如何在單擊元素時交替調用兩個函數？

HTML：當我點擊li元素首次如何在單擊元素時交替調用兩個函數？

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

此代碼工作正常。當我第一次點擊'.selectable'時，我得到了「select selectable」，第二次，我得到了「select deselectable」而不是「取消選擇」。

當我點擊相同的'li'元素時，我該如何在兩種方法之間切換？

來源

2013-07-19 Sagar

哎，不是這樣。點擊功能，你可以在你.toggleClass（），http://api.jquery.com/toggleClass/將把握好您的需要。 –

click僅綁定到綁定時匹配選擇器的元素。你想用on與委託事件：

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

注意CSS類是區分大小寫的。不是。

如果有一個容器將包含所有可選和不可選項，則該容器不會被銷燬並且比document更接近，請改用它。

來源

2013-07-19 07:36:39

你可以做到這一切在一個事件綁定：

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

來源

2013-07-19 07:39:04

可以這樣做使用一個函數，切換並且不依賴於標記。

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

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

來源

2013-07-19 07:39:58

這裏的問題是切換是全局性的，所以切換狀態是在元素之間共享的（點擊第一個數據，然後第二個，即使它是第一個點擊它，第二個獲得第二個選項），我不認爲是期望的行爲。 –

你有.toggleClass（）函數http://api.jquery.com/toggleClass/檢查，

DEMO

只要檢查該演示，可能這會幫你。

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

來源

2013-07-19 07:50:04

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

來源

2013-07-19 07:59:51

如何在單擊元素時交替調用兩個函數？

回答

相關問題