为什么Jquery在我的html中添加内联样式？

Question

我正在使用CSS来重新设置这样一个广播组:

这是通过隐藏标签标签内的实际输入(按钮),然后将输入本身设置display:none为CSS,并将标签自身设置为按钮样式来完成的,如下所示:

<label for="likert1" class="likert">
   <input type="radio" id="likert1" name="patientViewGroup" value="1">
   1
</label>

它可以用CSS完成所有...但是因为有些浏览器(我看着你,IE8及以下)不能识别:checked伪类,这样做就像你的实际输入一样 - 这将通过超出形式的值 - 并不总是注册它被检查,所以JQuery来救援.

我现在使用JQuery在点击其中一个标签时设置addClass".amClicked",此时它还将收音机的"checked"属性切换为"true",并从兄弟姐妹中删除"amChecked"类.容易,对吗？这是JQuery代码:

$('.likert').on("click",function() {
    console.log("clikcy!");
    if(!$(this).hasClass('amChecked')) { 
        $(this).addClass("amChecked");
        $(this).children(":radio").attr("checked",true).css("display","none");
    }
    $(this).siblings().removeClass("amChecked")
                       .children(":radio").css("display","none");
});

嗯,它应该是,除了JQuery,出于某种原因,似乎一心想向我添加内联"样式"标签,<input>这会覆盖我display: none;并取消隐藏单选按钮本身,如下面的#3:

这是点击后输入代码的样子:

<input type="radio" id="likert3" name="patientViewGroup" value="3" 
       checked="checked" style="display: inline-block; " class="amChecked">

更糟糕的是,添加.css("display","none")到我的点击代码(如上所示)不会覆盖它 - 按钮仍会显示.如果我不将它添加到removeClass行,那么该按钮就会停留在那里,取消选中,如下所示:

那么 - 任何人都可以告诉我为什么Jquery在我的代码中添加了这个,不受限制的,并且我能做些什么来阻止或覆盖它？任何帮助将不胜感激!

Answer 1

根据我的经验，jQuery 总是会内联样式。它影响元素，而不是页面或样式表定义的样式。它只知道该元素存在，因为您将其指向该元素。

另外，我不会将收音机放在标签内。这可能就是导致问题的原因。

在样式表中或定义样式的任何位置：

.hidden {
    display: none;
}

为什么不使用类 withdisplay:none;而不是 a .css()？.addClass('hidden')。，.removeClass('hidden')应该管用。

然后你就可以在任何地方使用它。

同时要构建一个小提琴来进行测试。

编辑这是一个小提琴。 实际上，刚刚开始查看您的 jQuery。我不确定我看到的预期结果是什么？您只需单击一个元素即可更改收音机，对吧？

使用单选按钮，您不必设置某些内容来取消选择它们，它们会自行取消选择。

如果您设置隐藏值而不是display: none;单选值，则不会遇到问题注释中提到的问题。然后，您只需设置一个函数来根据您单击的元素的某些属性更改隐藏值的值。