Question

$(".home").click(function(){
    $("#bg").removeClass("dungeonsbg bgsbg arenasbg specgearbg").addClass("homebg");
});
$(".dungeons").click(function(){
    $("#bg").removeClass("homebg bgsbg arenasbg specgearbg").addClass("dungeonsbg");
});
$(".arenas").click(function(){
    $("#bg").removeClass("homebg bgsbg dungeonssbg specgearbg").addClass("arenasbg");
});
$(".bgs").click(function(){
    $("#bg").removeClass("homebg dungeonsbg arenasbg specgearbg").addClass("bgsbg");
});
$(".specgear").click(function(){
    $("#bg").removeClass("homebg bgsbg arenasbg specgearbg").addClass("specgearbg");
});

.home，.dungeons等是div中名为navigationMenu的标签。只是无法理解它，我可能会重复使用相同的逻辑来处理页面上的其他内容。理想情况下，它会从所点击的内容中获取一个值，并使用该值添加新类，这样如果我添加了更多链接，它就会自动生效。

Answer 1

$(".home, .dungeons, .arenas, .bgs, .specgear").click(function(){
    $("#bg").attr('class', $(this).attr('class') + 'bg');
});

Answer 2

假设每个点击类只有一个类而且#bg没有其他类，那么你可以用必要的一个完全覆盖#bg的className：

$(".home, .dungeons, .arenas, .bgs, .specgear").click(function(){
  $('#bg')[0].className = this.className + 'bg';
});

Answer 3

假设所讨论的所有元素只有一个类：

$('.home, .dungeons, .arenas, .bgs, .specgear').click(function () {
    document.getElementById('bg').className = this.className + 'bg';
});

Answer 4

另一种解决方案可能是这样的：

$('#navigationMenu a').click(function() {
    $('#bg').removeClass().addClass($(this).attr('class') + 'bg');
});

这确实假设#bg没有任何类，并且锚只有一个类。

我怎么能把它放到一个功能中？

4 个答案: