jquery - 根据其子跨度类显示同级按钮

Question

我有 3 个带有字形的按钮，我想根据单击这 3 个按钮中的哪一个来显示或隐藏它们。

下面是按钮示例和点击代码示例。我正确地进入了 if hasClass Pencil，它隐藏了不起作用的同级:

<div class="row contact-row">
  <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
  <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
  <button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span></button>
</div>

$(".contact-row").on("click", ":button", function () {
    var $t = $(this);
    if ($t.children("span").hasClass("glyphicon-pencil")) {
        $t.siblings().children().hasClass('glyphicon-remove').parent().hide();
    };
  }; //end .contact-row 'click'

我试图用这一行做的是隐藏包含类“glyphicon-remove”的跨度的按钮

$t.siblings().children().hasClass('glyphicon-remove').parent().hide();

Answer 1

问题是因为 hasClass() 返回一个 bool 值，而不是 jQuery 对象，因此您无法从中链接更多 jQuery 方法。要解决此问题，您可以直接向 children() 提供 .glyphicon-remove 选择器:

$(".contact-row").on("click", ":button", function() {
  var $t = $(this);
  if ($t.children("span").hasClass("glyphicon-pencil")) {
    $t.siblings().children('.glyphicon-remove').parent().hide();
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row contact-row">
  <button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true">pencil</span>
  </button>
  <button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-remove" aria-hidden="true">remove</span>
  </button>
  <button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-ban-circle" aria-hidden="true">ban circle</span>
  </button>
</div>

但是请注意，考虑到问题中的逻辑，您可以简单地将 JS 代码简化为这样并获得相同的结果:

$(".contact-row").on("click", "button:has(.glyphicon-pencil)", function() {
    $('button:has(.glyphicon-remove)').hide();
});