Question

我有一些jQuery代码，通过打开无线电输入的父元素（div）的边框来突出显示检查哪个单选按钮。单选按钮都有class =“colors”，所以我的选择器是“input.colors：checked”。

问题是当页面加载时它不会打开边框。为了进行调试，我将相同的语句放在悬停事件中，并且它确实有效。

我认为jQuery ready（）函数会在文档HTML完全加载后运行，那么为什么看起来在read（）运行时没有检查单选按钮，但是稍后在我进行悬停时检查？？

此代码是否有效，或者我遗失了什么？

我正在使用jQuery 1.3.1和Firefox 3.0.6。

（另外：我可以在Firebug中调试吗？）

以下是代码：

$(document).ready(function(){
// This one does NOT work.  No red border when the page loads.
$("input.colors:checked").parent().css({border:'2px solid red'});

$("div.color_choice").hover(
      function(){
           // BUT, this one works!  
           // When I hover over an unrelated div, the red border appears
           // (this line is here only for debugging)
           $("input.colors:checked").parent().css({border:'2px solid red'}); 
      },
      function(){
      }
   );

   ...

更新：好的，确实这是一个愚蠢的错误。我在其他地方有另一个jQuery语句，它在页面加载时将边框设置为白色。刚刚烧了几个小时盯着这个。今天键盘上的时间太长了。感谢您的回复 - 让我朝着正确的方向前进！

Answer 1

对我来说很好。我猜你在别的地方有一个错误导致你的脚本破坏。萤火虫是你的朋友。

Answer 2

适合我：

<html>
<head><title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("input.colors:checked").parent().css({border:'2px solid red'});
});
</script>
</head>
<body>

<div><input class="colors" type="checkbox" checked="checked" /></div>
<div><input class="colors" type="checkbox"></div>

</body>
</html>

jQuery头部刮擦

2 个答案: