Question

我不知道问题的标题是否正确，因为我不确切知道这是什么。

我有这段代码：

  $actual.find('h2').addClass('event__change')
    .append('<span class="event__arrow" aria-hidden="true">&#9660;</span>')
    .append(function () {
      var self = $(this);
      var list = '<ul class="dropdown hidden">';

      $('.event').each(function (index) {
        if ($(this).find('h2')[0] != self[0]) {
          list += "<li data-index='" + index + "'>" + $(this).find('h2').text() + '</li>';
        }
      });
      return list;
    })
    .click(function () {
      if ($(this).attr("data-expanded") == true) {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", false);
      } else {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", true);
      }
    });

我试图这样使用：

  $actual.find('h2').addClass('event__change');
  $actual.append('<span class="event__arrow" aria-hidden="true">&#9660;</span>');

  $actual.append(function () {
      var self = $(this);
      var list = '<ul class="dropdown hidden">';

      $('.event').each(function (index) {
        if ($(this).find('h2')[0] != self[0]) {
          list += "<li data-index='" + index + "'>" + $(this).find('h2').text() + '</li>';
        }
      });
      return list;
    });

    $actual.click(function () {
      if ($(this).attr("data-expanded") == true) {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", false);
      } else {
        $(this).find("ul").toggleClass('hidden');
        $(this).attr("data-expanded", true);
      }
   });

但如果我尝试更改第二个代码，效果将完全破坏，我想了解原因..

Answer 1

在第一个示例中，您将链接find("h2")的结果。

在第二步中，您直接在$actual上工作。

这些是不同的元素集合。

Answer 2

您可以轻松修复代码：

var $actual_ = $actual.find('h2');// redefine the target of next actions
$actual_.addClass('event__change');
$actual_.append('<span class="event__arrow" aria-hidden="true">&#9660;</span>');

$actual_.append(function () {
  var self = $(this);
  var list = '<ul class="dropdown hidden">';

  $('.event').each(function (index) {
    if ($(this).find('h2')[0] != self[0]) {
      list += "<li data-index='" + index + "'>" + $(this).find('h2').text() + '</li>';
    }
  });
  return list;
});

$actual_.click(function () {
  if ($(this).attr("data-expanded") == true) {
    $(this).find("ul").toggleClass('hidden');
    $(this).attr("data-expanded", false);
  } else {
    $(this).find("ul").toggleClass('hidden');
    $(this).attr("data-expanded", true);
  }
});

jquery链和没有jquery链之间的区别

2 个答案: