单击按钮/下拉列表时删除特定类

Question

我想删除特定的类（"帮助文本"）。 当用户单击按钮时，特定的类将被删除。

这是我的代码

<div class="dropdown dropdown-lg">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <img src="img/find-match.png"/>
        <span class="help-text">Click Here</span>
    </button>
</div>
<script>
jQuery(document).click(function (e) {
    if (!jQuery(e.target).hasClass('dropdown-lg')) {
        jQuery('.dropdown-lg').removeClass('help-text');
    }
});
</script>

请告诉我任何解决方案。

Answer 1

带有 help-text 的span位于按钮内。所以你可以使用，

$(e.target).find('.help-text').removeClass('help-text')

或

$('.help-text',e.target).removeClass('help-text')

另外，与其处理我建议的点击document，

$('button.dropdown-toggle').click(...

小提琴

$('button.dropdown-toggle').click(function(){
    $(this).find('.help-text').toggleClass('help-text')
});

Answer 2

jQuery('button.btn').click(function (e) {
        if (jQuery(this).find('.help-text').length) {
            jQuery('.help-text').removeClass('help-text');
        }
    });

Answer 3

.help-text是button的子代，使用 find（）

jQuery('.dropdown-lg').find('.help-text').removeClass('help-text');

jQuery('.dropdown-lg').click(function(e) {
  jQuery(this).find('.help-text').removeClass('help-text');
});

.help-text {
  background: green;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dropdown dropdown-lg">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <img src="img/find-match.png" /><span class="help-text">Click Here</span>
  </button>
</div>