使用JS删除元素类onclick（不工作）？

Question

我已经浏览了一下，但我找不到任何可以真正解决我所遇到的问题的东西，虽然我可以读写基本的JS但我仍然觉得调试自己的问题很棘手。

我正在尝试从onclick元素中删除一个类，但出于某种原因，.removeClass无法按预期工作。我已经使用一些JS来触发样式更改（也是onclick）所以我知道元素ID和类是正确的。

触发元素：#gsbtns1 .vc_btn3-color-grey

要移除的类：.nest-custom-activator

这是我工作'风格'JS的一部分：

<script>
jQuery('#gsbtns1 .vc_btn3-color-grey').click(function() {
    jQuery('#gsbtns1 .vc_btn3-color-grey').css({
        'opacity': '0.3',
        'cursor': 'auto',
        'pointer-events': 'none'
    });
});
</script>

以下是控制台中触发器元素的屏幕截图和文本副本：

控制台屏幕截图：

控制台文字：

<div class="vc_btn3-container  nest-custom-activator
 wpb_animate_when_almost_visible wpb_fadeIn fadeIn vc_btn3-inline 
 vc_custom_1505915503693 wpb_start_animation animated" id="gsbtns1">

我试过这个JS：

<script>
jQuery('#gsbtns1 .vc_btn3-color-grey').click(function() {
    jQuery(".vc_btn3-color-grey").removeClass("nest-custom-activator");
});
</script>

和这个JS：

<script>
jQuery('#gsbtns1 .vc_btn3-color-grey').click(function() {
    jQuery("#gsbtns1 .vc_btn3-color-grey").removeClass("nest-custom-activator");
});
</script>

可悲的是，这些都没有删除.nest-custom-activator类。

任何人都可以帮助我理解为什么这不起作用吗？

Answer 1

您的屏幕截图显示的是父级，而不是当前元素。因此，您需要：

@using SelfHosted.Website
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper SelfHosted.Website.TagHelpers.*, SelfHosted.Website

Answer 2

您需要将其包装在$（document）.ready（function（）{}）

中

<script>
 $(document).ready(function(){
$('#gsbtns1 .vc_btn3-color-grey').click(function() {
    $("#gsbtns1 .vc_btn3-color-grey").removeClass("nest-custom-activator");
});

})
</script>

而且我猜你的元素有gsbtns1和类vc_btn3-color-grey

  $('#gsbtns1.vc_btn3-color-grey')

Id与班级之间没有空格

Answer 3

用下面的

替换你的jquery代码

HTML：

＆＃13;

＆＃13;

$('#gsbtns1.vc_btn3-color-grey').on('click',function() {
    $('#gsbtns1.vc_btn3-color-grey').css({
        'opacity': '0.3',
        'cursor': 'auto',
        'pointer-events': 'none'
    });
});

＆＃13;

<div id="gsbtns1" class="vc_btn3-container  vc_btn3-color-grey nest-custom-activator  wpb_animate_when_almost_visible wpb_fadeIn fadeIn vc_btn3-inline vc_custom_1505915503693 wpb_start_animation animated" >
test</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle