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()返回一个布尔值，而不是一个jQuery对象，所以你不能从中链接更多的jQuery方法。要解决此问题，您可以直接向.glyphicon-remove提供children()选择器：

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

Answer 2

hasClass()返回布尔值，而不是jQuery对象。而是使用has()方法在direct child selector >的帮助下过滤掉孩子拥有特定班级的元素（仅检查直接孩子）。

$t.siblings().has('>.glyphicon-remove').hide();

$(".contact-row").on("click", ":button", function() {
  var $t = $(this);
  if ($t.children("span").hasClass("glyphicon-pencil")) {
    $t.siblings().has('>.glyphicon-remove').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>

Answer 3

...简单地

$(".glyphicon-remove").parents("button").hide();

https://jsfiddle.net/324879L0/1/

显示基于其子级别类的兄弟按钮

3 个答案: