所以下面的代码隐藏了abc类的所有元素，但我只想隐藏xyz类的div。使用this显然不起作用，但它需要与this关键字类似的功能。
HTML代码
<body>
<button id="xyz">xyz</button>
<button id="mno">mno</button>
<button id="cde">cde</button>
<div class='abc xyz'></div>
<div class='abc mno'></div>
<div class='abc xyz'></div>
<div class='abc cde'></div>
<div class='abc xyz'></div>
<div class='abc mno'></div>
<div class='abc xyz'></div>
</body>
JQuery代码
$('#xyz').on('click',function(){
if($('.abc').hasClass('xyz')){
$('.abc').hide();
}
else {
$('.abc').show();
}
});
$('#mno').on('click',function(){
if($('.abc').hasClass('mno')){
$('.abc').hide();
}
else {
$('.abc').show();
}
});
当我点击按钮xyz时，它会隐藏所有没有类.xyz的div，当我点击按键mno时，它将隐藏所有其他div，但类.mno的div会显示出来！
为什么不为该类创建一个特定的查询？
$('button').on('click',function(){
$('.abc.xyz').hide();
});
很难理解您需要什么
如果你想显示所有.abc，但隐藏所有.abc.xyz，可以这样做：
$('button').on('click',function(){
$('.abc').show();
$('.abc.xyz').hide();
});
如果你想只显示/隐藏被点击的元素，请执行以下操作：
$('button').on('click',function(event) {
var element = $(event.target);
if(element.hasClass('xyz')){
element.hide();
} else {
element.show();
}
});
您可以将this关键字与公共类一起使用，如belw所示的片段。
希望这能有所帮助。
$('.toggle-div').on('click', function() {
$('.abc').hide();
$('.abc.' + $(this).attr('id') ).show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='toggle-div' id="xyz">xyz</button>
<button class='toggle-div' id="mno">mno</button>
<button class='toggle-div' id="cde">cde</button>
<br>
<div class='abc xyz'>xyz</div>
<div class='abc mno'>mno</div>
<div class='abc xyz'>xyz</div>
<div class='abc cde'>cde</div>
<div class='abc xyz'>xyz</div>
<div class='abc mno'>mno</div>
<div class='abc xyz'>xyz</div>