Question

点击一个按钮，一个＆＃34; fa-minus＆＃34;被添加到当时出现的div中。如果单击fa-minus，则应用的效果为＆＃34; line-through＆＃34;文字装饰。同时，我希望fa-minus更改为fa-plus（稍后将文本deco撤消为无），这当前不起作用： https://codepen.io/HelleFl/pen/OjNQop

JS：

$(document).on("click", ".fa-minus", function() {
  $(this).toggleClass("fa-plus");     ///// this is not working, the rest of this is fine!!
  $(this).parent().css("text-decoration", "line-through");
  $(this).css("color", "gray");
});

Answer 1

问题在于它确实切换了班级fa-plus，但第一堂课仍为fa-minus。您需要做的是在添加其他图标相关类之前删除减去类。

正如@ cjl750所指出的那样，你不会看到这个类被添加到额外的列表项中。这是因为你的选择器$(".list")。

您需要使用$(".list .item")来处理所有列表项。

由于您的原始活动在fa-minus，因此您无需切换课程。您只需删除fa-minus类并添加fa-plus类。

然后你可以为fa-plus类创建一个事件，删除该类并添加fa-minus。不是最干净的方式，但我把它留给你。

Answer 2

我相信你有一个范围问题。我注意到只有添加多个列表项才会出现问题。

如果我们在此行之后关闭#button点击功能：

$("input[name=checkListItem]").val("").focus();

...然后我们继续在另一个click函数中包装最后的if语句，所以我们所有的click函数都是自包含的而不是嵌套的，这解决了这个问题。

$(function() {
  // Hide the container upon ready
  $(".list-container").hide();
  $("hr").hide();

  //* Prevent empty Add from continuing function by Evaluation; It will not accept only spaces; Clear input list once add is clicked; add item & Font Awesome icon to list *//
  $("#button").click(function() {
    if ($("input[name=checkListItem]").val().trim() !== "") {
      var toAdd = $("input[name=checkListItem]").val();
      $(".list-container").fadeIn(500);
      $(".list").append(
        '<div class="item"><i class="fa fa-times" aria-hidden="true"/><i class="fa fa-minus" aria-hidden="true"></i>' +
        toAdd +
        "</div>"
      );
    }

    // Focus back on text input once add is clicked
    $("input[name=checkListItem]").val("").focus();

  });

  // click the X icon to remove that item
  $(document).on("click", ".fa-times", function() {
    $(this).parent().remove();
    if ($(".fa").length === 0) {
      //If container empty, hide from view
      $(".list-container").hide();
      $("hr").fadeOut(500);
    }
  });

  // click the - icon to cross out that item
  $(".list").on("click", ".fa-minus", function() {
    $(this).toggleClass("fa-plus");
    $(this).parent().css("text-decoration", "line-through");
    $(this).css("color", "gray");
  });

  //Only show horizontal line if a list is present
  $(document).on("click", ".item", function(){
    if ($(".fa").length === 0) {
      $("hr").hide();
    } else {
      $("hr").fadeIn(500);
    }
  });

});

toggleClass再次没有改变图标

2 个答案: