重构jQuery代码以避免使用DRY方法

Question

它是一个待办事项列表，它可以工作，但我知道它可以更有效率。这样做是在输入文本框显示与否之间切换，我也在更改图标。

$("i:first").click(function(){
if($('i:first').attr("class") === "fas fa-plus"){
$('i:first').removeClass("fas fa-plus");
$('i:first').addClass("fas fa-angle-double-up")
$('input').css("display", "block");
}
else if($('i:first').attr("class") === "fas fa-angle-double-up"){
$('i:first').removeClass("fas fa-angle-double-up");
$('i:first').addClass("fas fa-plus")
$('input').css("display", "none");
}
});

Answer 1

你为什么要避免做这个干燥？代码是DRY是一件非常好的事情，你应该始终致力于实现，而不是避免。

我将假设这是翻译中的错误，并且您实际上确实想干掉这段代码，否则我看不到这个问题的意义。

因此，可以使用toggleClass()和toggle()将点击处理程序减少到两行：

$("i:first").click(function() {
$(this).toggleClass('fa-plus fa-angle-double-up');
$('input').toggle();
});

另请注意在处理程序中使用this来引用单击的元素。这是您可以进行的另一项优化，以节省再次查询 DOM 以检索您已经引用的元素的麻烦。

Answer 2

您可以进行一些改进。

• 使用 hasClass，这样就不必匹配整个类字符串
• 请考虑使用 toggleClass 添加和删除类。

然后我们可以写这样的东西：

var $btn = $('i:first');
var $input = $('input');
$btn.click(function () {
$(this).toggleClass('fa-plus fa-angle-double-up');
$input.toggle();
});