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

Posted 2023-02-22

【中文标题】为啥 Jquery 在我的 html 中添加内联样式？

【英文标题】：Why is Jquery adding inline styles to my html?为什么 Jquery 在我的 html 中添加内联样式？

【发布时间】：2013-03-27 23:19:51

【问题描述】：

我正在使用 CSS 重新设置广播组的样式，如下所示：

通过将实际输入（按钮）隐藏在标签标签内，然后在 CSS 中将输入本身设置为 display:none，并将标签本身设置为按钮，如下所示：

p>

<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"，并从兄弟姐妹。容易，对吧？这是 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 会在我的代码中添加这个，不请自来，我能做些什么来阻止或覆盖它吗？任何帮助将不胜感激！

【问题讨论】：

你能创建一个 jsFiddle 示例吗？

你添加的是.amChecked而不是.amClicked

您不应该将display: none 用于隐藏的单选按钮。请改用position: absolute; left: -10000px;。 IE 将不支持使用 display: none 或 visibility: hidden 显式隐藏的单选按钮或复选框上的“单击”事件。

但即便如此，如果隐藏的单选元素嵌套在您单击以选择该单选元素的元素中......这有什么关系？

谢谢，Pointy，这是非常好的建议，似乎让我找到了解决方案。

【参考方案1】：

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

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

在您的样式表或您的样式被定义的地方：

.hidden 
    display: none;

为什么不用display:none; 而不是.css() 的类呢？ .addClass('hidden')., .removeClass('hidden') 应该可以工作。

那么你可以在任何地方使用它。

打算在测试的同时制作一个小提琴。

编辑这是fiddle. 实际上，刚刚开始查看您的 jQuery。我不确定我看到预期的结果是什么？你只是想点击一个元素，它会改变收音机，对吧？

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

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

【讨论】：

好点...没有给我完整的答案，但是一个很好的电话！

查看我的小提琴更新。另外，完整的答案是 jQuery 总是推送 .css() 内联。

直接单击单选按钮（或其父标签）会清除组中其他单选元素的选中状态。但是，以编程方式设置收音机的checked 状态不会影响组中的其他人。据我们从 OP 的代码中得知，点击事件将从标签传播到其子输入。在其他情况下，冒泡可能会停止，或者点击目标可能不包含受影响的无线电。 Look at this fiddle 省略了其他单选选项上的 .removeAttr('checked')。

据我所知，就标准 html 表单而言，任何具有相同名称的“选中”单选按钮一次只允许一个“选中”实例。在 jQuery 中操作表单元素时是否会发生变化，这超出了我的范围。我不推荐这种做法，所以我不能真正谈论这个问题。 ;)

【参考方案2】：

使用 CSS 设置无线电输入的display，不要使用 jQuery 更改它。

label.likert > input 
    display: none;

另外，要切换“checked”属性，您可以为其分配一个“checked”值。要“取消选中”，请删除该属性。

$('label.likert').on('click', function () 
    if (!$(this).hasClass('amChecked')) 
        $(this).addClass('amChecked').children(':radio').attr('checked', 'checked');
    

    $(this).siblings('.amChecked').removeClass('amChecked').children(':radio').removeAttr('checked');
);

我把它一起扔到了this fiddle。

【讨论】：

谢谢，Rodney，但即使在 JSFiddle 中，当它们被选中时，它也不会隐藏实际的单选按钮 - 我试图让它们始终隐藏，只显示样式标签。不过，感谢您指出我未链接的 JQuery 语句 - 我忘了收紧它。

如果您希望它们始终隐藏，请不要将它们嵌套在标签中。 <label> 是一个特殊的标签。

我的答案和小提琴现在将它们隐藏起来。