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函数，描述here和here所述的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);
});

如何组合两个点击功能？

5 个答案: