Jquery切换背景?

时间:2009-09-09 17:30:04

标签: jquery user-interface hover radio-button

周          

DKK

    “id =”radio2“value =”75“/>     

我有一堆由while循环生成的div条目所以我想实现这个:当点击输入内部条目时我想要改变条目div的背景图像,但如果我在另一个条目div中选择另一个收音机..我'喜欢之前所有的变化(比如之前的背景变化)要离开并改变当前div的背景..这里是我试图做的也许你可以帮忙..这里是jquery下面

$("input").click(function() {

             $(this).parent("div").toggle(function() {
             $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
             }, function() {
             $(this).parent("div").css("background", "url(images/div_bg.png)");

             });

有些东西出现故障..我的意思是代码工作在所有人工作......任何人都可以帮助我吗?谢谢


我试过这两个:

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });

AND

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
                     }
                     else {
                         $(this).parent("div").css("background", "url(images/div_bg.png)");
                     }
                 });
             });

由于某些原因它根本不工作而不改变背景,也许它必须对上面的代码做一些事情是完整的脚本:

 <script type="text/javascript">

         $(document).ready(function() {

             $(".left_navigation a:last").toggleClass('bolder');


             $("input").each(function() {
                 var element_value = $(this).val();
                 $(this).prev("p").append(" " + element_value + ",-");
             });


             $("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });




         });

</script>

3 个答案:

答案 0 :(得分:3)

我看到的第一个直接问题是你的jQuery在它结尾处缺少一个});,除非你忘记将它粘贴在那里。除了抛出错误之外,这将阻止它做任何其他事情......

这是您之前尝试过的简化版本。它至少可以使debuging稍微容易一些。

<script type="text/javascript">
$(document).ready(function(){
    $("input").click( function() { 
         $("input").parent("div").removeClass("highlight");
         $(this).parent("div").addClass("highlight");
      });
  });
</script>

虽然,我之前没有看到任何明显错误的事情让我想知道$("input")是否符合您的想法。我可能至少会提醒您点击功能中的一些内容以进行健全性检查。我实际上已经发现了几次我的$(document).ready在我认为之前就已经开始了,即在我的输入准备就绪之前因为我的框架......

答案 1 :(得分:1)

有几个问题:

  • 您正在使用Toggle,切换功能是:
  

如果显示它们,则切换使它们成为可能   隐藏(使用隐藏方法)。如果   他们是隐藏的,切换使他们   显示(使用show方法)。

您应该询问收音机是否已被检查

  • 您应该调用每个函数,以便更改其他无线电div值

  • 您应该致电$(document).ready()函数

示例(警告:Javascript不是我最好的武器):

<script>
$(document).ready(function(){
    $("input").click( function() { 
         $("input").each(function() { 
             if (this.checked) {
                $(this).parent("div").css("background-color", "green") }
             else {
                $(this).parent("div").css("background-color", "red")}
          });
      });
  });
</script>

注意:我使用backgound-color进行更好的测试,但你对背景的使用很好。

答案 2 :(得分:0)

你可能需要使用'background-image'而不仅仅是'background'来设置图像。

编辑:以为我之前在jQuery中使用'background'css属性时遇到了问题,但是刚刚在各种浏览器上测试它似乎我错了或者在jQuery版本中修复了它,因为我使用它。 / p>