Jquery 尝试在按钮上切换或添加/删除类

很抱歉，必须对此进行编辑，粘贴不正确

我可以删除主按钮类，但无法添加类来设置其样式。“悬停”工作正常，但我无法切换，或者在激活时让此按钮显示额外的样式

单击一个按钮时，我希望它保持其

.hover

样式，该样式正在工作

这是我单选按钮的HTML

$（文档）.ready（函数（）{
控制台日志（“文件准备就绪”）；
$（'#span1'）.hide（）；
$（'#span2'）.hide（）；
$（'#span3'）.show（）；
$（'#span4'）.hide（）；
$（'#package1'）。单击（函数（）{
console.log（“package1已单击”）；
$（'#span1'）.show（）；
$（'#span2'）.hide（）；
$（'#span3'）.hide（）；
$（'#span4'）.hide（）；
$（“#package1”）.toggleClass（'selected'）；
//$（'#package1'）.addClass（'selected'）；
});
$（“#package2”）。单击（函数（）{
console.log（“package2 clicked”）；
$（'#span1'）.hide（）；
$（'#span2'）.show（）；
$（'#span3'）.hide（）；
$（'#span4'）.hide（）；
});
$（'#package3'）。单击（函数（）{
$（“.package3toggle”）.toggleClass（“radiocheked”）；
console.log（“package3已单击”）；
$（'#span1'）.hide（）；
$（'#span2'）.hide（）；
$（'#span3'）.show（）；
$（'#span4'）.hide（）；
});
$（'#package4'）。单击（函数（）{
$（“.package4toggle”）.toggleClass（“radiocheked”）；
console.log（“package4 clicked”）；
$（'#span1'）.hide（）；
$（'#span2'）.hide（）；
$（'#span3'）.hide（）；
$（'#span4'）.show（）；
});  
});
.Button\u Main{
颜色：rgb（255、255、255）；
填充顶部：20px；
垫底：20px；
边框：1px实心rgba（0,0,0,0.13）；
边框底部：4倍实心rgba（0,0,0,0.13）；
盒影：插入0 1px 1px 0 rgba（255255,0.22）；
边界半径：10px；
最大宽度：520px；
显示：-webkit内联框；
保证金：0自动；
字号：600；
背景色：#2fc05a；
字号：28px；
边缘顶部：15px；
光标：指针；
左侧填充：10px；
右边填充：10px；
}
.Button_Main：悬停{
颜色：#ffffff！重要；
背景#f6b93b；
边框颜色：#f6b93b！重要；
转换：所有0.4s到0；
}
.Button_Main.悬停{
颜色：#ffffff！重要；
背景#f6b93b；
边框颜色：#f6b93b！重要；
转换：所有0.4s到0；
}
.Button_Main：焦点{
颜色：#ffffff！重要；
背景#f6b93b；
边框颜色：#f6b93b！重要；
转换：所有0.4s到0；
}
.无线电检查{
颜色：#ffffff！重要；
背景#f6b93b；
边框颜色：#f6b93b！重要；
转换：所有0.4s到0；
}
.按钮_Main.selected{
颜色：#ffffff！重要；
边框颜色：#f6b93b！重要；
填充顶部：20px；
垫底：20px；
边框：1px实心rgba（0,0,0,0.13）；
边框底部：4倍实心rgba（0,0,0,0.13）；
盒影：插入0 1px 1px 0 rgba（255255,0.22）；
边界半径：10px；
最大宽度：520px；
显示：-webkit内联框；
保证金：0自动；
字号：600；
背景#f6b93b；
字号：28px；
边缘顶部：15px；
光标：指针；
左侧填充：10px；
右边填充：10px；
}
.选定{
颜色：#ffffff！重要；
边框颜色：#f6b93b！重要；
填充顶部：20px；
垫底：20px；
边框：1px实心rgba（0,0,0,0.13）；
边框底部：4倍实心rgba（0,0,0,0.13）；
盒影：插入0 1px 1px 0 rgba（255255,0.22）；
边界半径：10px；
最大宽度：520px；
显示：-webkit内联框；
保证金：0自动；
字号：600；
背景#f6b93b；
字号：28px；
边缘顶部：15px；
光标：指针；
左侧填充：10px；
右边填充：10px；
}
输入[类型=收音机]：已选中{
颜色：#ffffff！重要；
背景#f6b93b；
边框颜色：#f6b93b！重要；
转换：所有0.4s到0；
}

包装1
Package2（首先，正如Calvin Nunes所说，您缺少了
）jQuery脚本的一部分-这可能会解决问题

$(document).ready(function() {

  console.log("document ready");
  $('#span1').hide();
  $('#span2').hide();
  $('#span3').show();
  $('#span4').hide();

  $('#package1').click(function() {
    console.log("package1 clicked");
    $('#span1').show();
    $('#span2').hide();
    $('#span3').hide();
    $('#span4').hide();
    $("#package1").toggleClass('selected');
  });

  $('#package2').click(function() {
    console.log("package2 clicked");
    $('#span1').hide();
    $('#span2').show();
    $('#span3').hide();
    $('#span4').hide();
  });

});

如果没有，您应该检查是否触发了jQuery。您可以通过检查console.log或使用简单的警报功能来执行此操作

$(document).ready(function() {
  $('#package1').click(function() {
    alert("PACKAGE1 was clicked!");
  });

  $('#package2').click(function() {
    alert("PACKAGE2 was clicked!");
  });
});

如果什么也没有发生，那么可能是您没有正确放置jQuery脚本。试着将它放在jQuery库之后。
也许这只是一个输入错误，但您缺少了ready:
}的结尾部分我不太明白你的问题，你说你想保持
.hover
风格，但是你的示例上没有任何悬停风格。到底是什么问题？一旦您纠正了
}）
问题，这似乎可以正常工作。。？你说悬停有效，但没有悬停状态？我在运行代码时出错…我甚至没有看到悬停状态。我必须编辑这个，现在应该更清楚了。