Question

我有一个按钮，单击该按钮时，我想显示两个附加按钮“取消”和“确认”。

添加o类时，会向左添加负空白，按钮消失。

$('.a_bttn_inner_action').click(function() {
  if ($(this).children().find('.button')) {

    $(this).parent().find('.button').queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).removeClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).removeClass('o');
      next();
    });

  } else if ($(this).children().find('.confirm.no')) {

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).addClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.button').queue(function(next) {
      $(this).removeClass('o');
      next();
    });
  }
});

li.o {
  margin-left: -800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bttn_inner_action">
  <ul class="action">
    <a href="#" class="a_bttn_inner_action">
      <li class="button ">Do something...</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm no o">Cancel!</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm yes o">Confirm...</li>
    </a>

  </ul>
</div>

使用jQuery，我在if($(this).children().find('.button'))和这里else if($(this).children().find('.confirm.no'))都有问题。

我想检测li元素的类选择了当前元素的哪个子元素。

这可能吗？

我尝试过if($(this).children().attr('class') == 'button')也不起作用。

Answer 1

我相信这就是您要照顾的。对于检查孩子，您可以使用

.find('.button').length

它将返回0或正整数，因此您可以在if中使用它。在您的代码中，第一个if始终为true，因此另一个永远不会运行。

$('.a_bttn_inner_action').click(function() {

  if ($(this).find('.button').length) {
    $(this).parent().find('.button').queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).removeClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).removeClass('o');
      next();
    });

  } else if ($(this).find('.confirm.no').length) {

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).addClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.button').queue(function(next) {
      $(this).removeClass('o');
      next();
    });
  }
});

li.o {
  margin-left: -800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
  <ul class="action">
    <a href="#" class="a_bttn_inner_action only-here">
      <li class="button ">Do something...</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm no o">Cancel!</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm yes o">Confirm...</li>
    </a>

  </ul>
</div>

Answer 2

要简单地知道单击了哪个按钮，可以使用click事件的target属性来获取被单击的html元素=>

$('.elements').on('click', function(e){
     var $targer = $(e.target);
});

您可以在jQuery元素上使用hasClass() jQuery方法，或使用is()方法来测试jQuery / html元素的属性。

我重写了您的代码段，保持了逻辑，但更改了一些html。查看点击的元素（目标）的测试。

您的html格式不正确，因为列表ul的子代必须是li元素。因此，您的html应该是这样的：

<div class="bttn_inner_action">
  <ul class="action">
    <li class="a_bttn_inner_action">
      <a href="#" class="button ">Do something...</a>
    </li>
    <li class="a_bttn_inner_action">
      <a href="#"class="confirm no o">Cancel!</a>
    </li>
    <li class="a_bttn_inner_action">
      <a href="#" class="confirm yes o">Confirm...</a>
    </li>
  </ul>
</div>

$('.button').click(function(e) {
  var $target = $(e.target);
  
  if ($target.hasClass('do-something')) {
    $('.button.confirm.yes').delay(300).queue(function(next) {
      $(this).parent('li').removeClass('o');
      next();
    });
    $('.button.confirm.no').delay(100).queue(function(next) {
      $(this).parent('li').removeClass('o');
      next();
    });
    
  } else if ($target.is('.confirm.no')) {
    $('.button.confirm.yes').delay(300).queue(function(next) {
      $(this).parent('li').addClass('o');
      next();
    });
    $('.button.confirm.no').delay(100).queue(function(next) {
      $(this).parent('li').addClass('o');
      next();
    });
  }
  
});

li.o {
  margin-left: -800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bttn_inner_action">
  <ul class="action">
    <li class="li_bttn_inner_action">
      <a href="#" class="button do-something">Do something...</a>
    </li>
    <li class="li_bttn_inner_action o">
      <a href="#"class="button confirm no">Cancel!</a>
    </li>
    <li class="li_bttn_inner_action o">
      <a href="#" class="button confirm yes">Confirm...</a>
    </li>
  </ul>
</div>

可以优化事件监听器。使用$（'。class'）。click（）函数，侦听器将附加到每个.class元素。使用$（'parentElement'）。on（'click'，'subElement'，function（e）{...}）代替，仅将一个事件侦听器附加到父元素。

请参见.on() function on jQuery doc。

Answer 3

您可以只查看button类的孩子人数。

if ($(this).find('.button').length > 0) {
    // there are some
}

Answer 4

children()获取所选元素的所有直接子元素。 find()将所有子元素一直放到层次结构中。

因此，$(this).children()将选择所有<li>元素，然后find()将遍历这些<li>的所有子元素，而不是浏览<li>本身

您想要的只是

$(this).find('.button').length 
//or
$(this).find('.confirm.no').length

//or you could just find the li itself and then test for the class
var button = $(this).find('li');
if(button.is('.button')){

} else if(button.is(".confirm.no")){

}

还请注意，不要针对children()或find()的返回进行测试，因为两者都会返回一个新的jQuery对象，无论是否实际找到任何东西，因此结果始终会测试为真。 >

您也可以将点击处理程序放在LI本身上，而不用担心将无效的包装在锚定标记中

$('ul.action li').click(function() {
  var $this = $(this);
  if($this.is('.button')){

  } else if($this.is('.confirm.no')){

  }
});

Answer 5

答案是exist（）函数。

以下语句：

$(this).children().find('.button')

即使没有选择任何元素，也返回长度为零的JQuery对象。

因此，if ($(this).children().find('.button'))总是会被传递。

您可以检查返回对象的长度，也可以使用JQuery exists()函数。

详细信息为here。

jQuery检测子元素的类

5 个答案: