如何結合兩個單擊功能？

Question

我有兩個點擊功能...有點像下面。 這是工作。 但是，我有種感覺，由於優化原因，單擊功能可以組合為一個。 基本上，當單擊xx時，它顯示一些元素，隱藏一些元素，並添加一個類。 單擊yy時，情況恰好相反。 這些可以合並嗎？

/*clicking the search icon on the top*/ 
$(".xx").on("click",function(){
        $a.show();
        $b.hide();
        $c.addClass("myClass");

}); 

/*clicking the cross icon on the top*/
$(".yy").on("click",function(){
        $c.removeClass("myClass");
        $a.hide();
        $b.show();                  
});

Answer 1

是的，您可以將它們與單個功能結合使用。 當您隱藏，顯示類並將類添加到某些元素時，必須檢查是否單擊了相應的元素。 這是代碼：

$(".xx, .yy").on("click", function(){
    if($(this).hasClass("xx")){
       $a.show();
       $b.hide();
       $c.addClass("myClass");
    }else if($(this).hasClass("yy")){
       $c.removeClass("myClass");
       $a.hide();
       $b.show();
    }
});

而已。

Answer 2

使用toggle功能，描述在這里和toggleClass描述的功能在這里 。

這可能看起來像：

function handleClick()
{
    $a.toggle();
    $b.toggle();
    $c.toggleClass("myClass");
}

$(".xx").on("click", handleClick);
$(".yy").on("click", handleClick);

Answer 3

您可以使用attr來檢查類名，也可以使用hasClass（）

$(".xx, .yy").on("click",function(){
    var c_name = $(this).attr('class');
    if(c_name == 'xx'){
        $a.show();
        $b.hide();
        $c.addClass("myClass");
    }else if(c_name == 'yy'){
        $c.removeClass("myClass");
        $a.hide();
        $b.show();
    }
});

Answer 4

而不是將類添加到$ c中，而是將該類添加到一個公共父對象中，並使用CSS控制$ a和$ b的可見性

 .a, .b {display:none;}
 .parentClass .a, .parentClass .b{
    display:block
 }

並根據單擊的元素添加或刪除類。

Answer 5

您可以使用切換功能並將布爾值傳遞給它們：

$(".xx, .yy").on("click",function(){
    var custBoolean = $(this).is(".xx");
    $a.toggle(custBoolean);
    $b.toggle(!custBoolean);
    $c.toggleClass("myClass", custBoolean);
});