Question

如何结合使用.change的两种不同用法来实现一个功能？

两者都使用$('input[name="menu"]')，但在语义上有所不同，因此我不确定将两者结合的正确方法。

我尝试将$(".menu[data-id=" + this.id + "]").toggleClass("active", this.checked);放在.on("change"), function ()里面，没有任何运气。

$('input[name="menu"]')
  .change(function() {
    $(".menu[data-id=" + this.id + "]").toggleClass("active", this.checked);
  })
  .change();
$(function() {
  $('input[name="menu"]').on("change", function() {
    if (
      $(this)
      .closest('[class*="list-"]')
      .is(".list-custom")
    ) {
      if ($(this).is(":checked")) {
        $(this)
          .siblings("[data-icon]")
          .attr("data-prefix", "fas")
          .closest(".launch-icon")
          .addClass("checked");
      } else {
        $(this)
          .siblings("[data-icon]")
          .attr("data-prefix", "far")
          .closest(".launch-icon")
          .removeClass("checked");
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

如果是我，我将像这样合并您的代码，但是如果您正在寻找解决问题的真正方法，请提供html标记和有效的代码段。

// Starting point.

$(document).ready(function()
{
    // Register listener for the change event.

    $('input[name="menu"]').change(function()
    {
        // This was on the first listener of change event.

        $(".menu[data-id=" + this.id + "]").toggleClass("active", this.checked);

        // This was on the second listener of change event.

        if ($(this).closest('[class*="list-"]').is(".list-custom"))
        {
            if ($(this).is(":checked"))
            {
                $(this).siblings("[data-icon]").attr("data-prefix", "fas")
                       .closest(".launch-icon").addClass("checked");
            }
            else
            {
                $(this).siblings("[data-icon]").attr("data-prefix", "far")
                       .closest(".launch-icon").removeClass("checked");
            }
        }
    });

    // Trigger a change event on the input element.
    // This was after the first event listener (why?)

    $('input[name="menu"]').change();
});

结合两个变更功能

1 个答案: