Question

我想删除特定的类（＆＃34; help-text＆＃34;）。当用户点击按钮时，特定类将被删除。

这是我的代码

<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

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

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

或

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

此外，我建议不要处理点击document，

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

<强> https://docs.oracle.com/javase/8/docs/api/

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

Answer 2

SInce .help-text是button的孩子，使用find()

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

＆＃13;

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

＆＃13;

.help-text {
  background: green;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

3 个答案: