Javascript 是否有其他方法来编码/组合这些？JS

如下图所示，一个函数显示两件事，另一个函数隐藏这两件事。 不知何故，它们是如此相似，我真的很想看看是否有一种方法可以将它们结合在一起，但我就是想不出一种方法来做到这一点

var btns = {
    filterBtn: function () {
        $('.filter-btn').on('click', function () {
            $('.cover').show();
            $('.popup').show();
        })
    },
    popupClose: function () {
        $('.popup-x-btn').on('click', function () {
            $('.cover').hide();
            $('.popup').hide();
        })
    }
}

有人有什么建议吗？

---

或者最好保持原样？

您可以利用jQuery的方法

功能切换覆盖和弹出（显示或隐藏）{
$（'.cover、.popup'）。切换（showOrHide）；
}
可变基站={
filterBtn:function（）{
$（'.filter btn'）。在（'click'，function（）上{
切换Coverage和Popup（true）；
})
},
popupClose:函数（）{
$（'popup-x-btn'）。在（'click'，function（）上{
切换Coverage和Popup（false）；
})
}
}

您可以利用jQuery的方法

功能切换覆盖和弹出（显示或隐藏）{
$（'.cover、.popup'）。切换（showOrHide）；
}
可变基站={
filterBtn:function（）{
$（'.filter btn'）。在（'click'，function（）上{
切换Coverage和Popup（true）；
})
},
popupClose:函数（）{
$（'popup-x-btn'）。在（'click'，function（）上{
切换Coverage和Popup（false）；
})
}
}

您可以通过一个简单的if-else语句来实现这一点

$('.filter-btn .popup-x-btn').on('click', function() {
  if ($(this).hasClass("filter-btn")) {
    $('.cover').show();
    $('.popup').show();
  } else {
    $('.cover').hide();
    $('.popup').hide();
  }
});

---

您可以通过一个简单的if-else语句来实现这一点

$('.filter-btn .popup-x-btn').on('click', function() {
  if ($(this).hasClass("filter-btn")) {
    $('.cover').show();
    $('.popup').show();
  } else {
    $('.cover').hide();
    $('.popup').hide();
  }
});

---

它是JS，你有这么多的可能性：

function toggle(selector, dir) {
    return function() {
        $(selector).on('click', function() {
            $('.cover')[dir]();
            $('.popup')[dir]();
        });
    };
}

var btns = {
    filterBtn: toggle('.filter-btn', 'show'),
    popupClose: toggle('.popup-x-btn', 'hide'),
}

但是这是否更好呢？嗯，这是我个人的看法

---

关于JS，重要的是你有很多方法来做每件事，而困难的是找到一种一致的方法来做事情。这就是为什么人们会使用更复杂的框架，比如react、angular、ember、vue等等。

它的JS，你有很多可能：

function toggle(selector, dir) {
    return function() {
        $(selector).on('click', function() {
            $('.cover')[dir]();
            $('.popup')[dir]();
        });
    };
}

var btns = {
    filterBtn: toggle('.filter-btn', 'show'),
    popupClose: toggle('.popup-x-btn', 'hide'),
}

但是这是否更好呢？嗯，这是我个人的看法

---

关于JS，重要的是你有很多方法来做每件事，而困难的是找到一种一致的方法来做事情。这就是为什么人们使用更复杂的框架，比如react、angular、ember、vue等等。我能想到的最好的重构方法是使用，你可以使用

true

来显示元素，或者

false

来隐藏元素：

$（'.showImage.hideImage'）。在（'click'，function（）上{
$（'img'）.toggle（$（this.hasClass（'showImage'））；
});

显示
隐藏


我能想到的最好的重构是使用，您可以使用
true
来显示元素或
false
来隐藏元素：


$（'.showImage.hideImage'）。在（'click'，function（）上{
$（'img'）.toggle（$（this.hasClass（'showImage'））；
});

显示
隐藏


没有意识到可以将布尔值放入切换中以显示或隐藏内容。非常感谢您的回答。我不知道可以将布尔值放入切换以显示或隐藏内容。非常感谢你的回答。对不起，我把支票给了Daerik，你的回答很好，你曾想过这样做，但还没有尝试。正在考虑是否有可能缩短代码，如Daerik的示例，但我也喜欢你的答案。对不起，我给了Daerik支票，你的答案很好，确实想过这样做，但还没有尝试。考虑是否有可能缩短代码，比如Daerik的示例，但我也喜欢你的答案。