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

重构jQuery代码以避免DRY方法

2 个答案: