在循环变化的图像不起作用

我用一个for循环，显示通过jQuery的所有元素在这一个功能：在循环变化的图像不起作用

<script> 
$(function() { 
    var number_menus = 9; 
    for (i = 1; i <= number_menus; i++) { 
     var p1 = +i; 
     $(".wm_" + i).show() 
      .css("background-image", "url(imagenes/footer/m/" + i + ".png)"); 

     $(".wm_" + i).mouseover(function() { 
      $(this).css(
       "background-image", 
       "url(imagenes/footer/m/" + i + "_down.png)" 
      ); 
      alert("this_down.png"); 
     }); 

     $(".wm_" + i).mouseout(function() { 
      $(this).css(
       "background-image", 
       "url(imagenes/footer/m/" + i + ".png)" 
      ); 
     }); 
    } 
}); 
</script>

到另一边，我有这样的代码用来显示加载的所有元素或图像，并创建鼠标悬停效果：

<div id="web_footer_publi"> 
    <div id="web_footer_marks" class="wm_1"></div> 
    <div id="web_footer_marks" class="wm_2"></div> 
    <div id="web_footer_marks" class="wm_3"></div> 
    <div id="web_footer_marks" class="wm_4"></div> 
    <div id="web_footer_marks" class="wm_5"></div> 
    <div id="web_footer_marks" class="wm_6"></div> 
    <div id="web_footer_marks" class="wm_7"></div> 
    <div id="web_footer_marks" class="wm_8"></div> 
    <div id="web_footer_marks" class="wm_9"></div> 
</div>

当创建函数认为展循环中的所有posibilities所有类，但是当我去了这个图像显示了我循环的其他图像和作品不好，我想，请告诉我what'在这个代码中与它一起工作不好

Thank's !!

来源

2012-09-26 Gerardo Guzmán Miro

嗨赫拉尔多，你会想要切换你的'id'和'class'属性 - 'id'属性被设计为唯一的，而'class'属性不是 – Nacht

对不起，如果在这种情况下你不明白的东西，你可以告诉我，...不理解我，我去编辑，但肯定如果你去论坛，说西班牙语，意大利语和葡萄牙语，我确定我喜欢看你写了.....我说3 langu年龄和英语也没有用，太多肯定在许多事情的错误.....不仅存在英语..... –

你不需要JavaScript来改变这样的图像。这应该用CSS来完成。 – ahren

我认为这是由于上下文造成的。在循环内部创建闭包，以便代码立即执行。应该有其他方法来解决这个问题。

<script> 
    $(function() { 
     var number_menus = 9; 
     for (i = 1; i <= number_menus; i++) { 

    (function(i){ 

         var p1 = +i; 
         $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)").mouseover(function() { 
             $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)"); 
             alert("this_down.png"); 
         }).mouseout(function() { 
             $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)"); 
         }); 

    })(i); 

     } 
    }); 
</script>

来源

2012-09-26 00:13:16

对不起，我在移动设备上，无法正确格式化 –

将var放入循环中？我的功能有这个，因为你放在这里，没有工作我，我不会低估，如果循环产生的所有类的可能性，为什么没有工作..... –

是的这个工作..... –

试试这个办法，看看它是否工作

$(function() { 
    var number_menus = 9; 
    (function() { for (i = 1; i <= number_menus; i++) { 
     var p1 = +i; 
     $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)"); 
     $(".wm_" + i).mouseover(function() { 
      $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)"); 
      alert("this_down.png"); 
     }); 
     $(".wm_" + i).mouseout(function() { 
      $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)"); 
     }); 
    } })(i); 
});

来源

2012-09-26 00:15:17

Y试试thank' s并且没有工作我..... –

我错误地为第二个功能打了一个$唱..删除并重试 –

，而不是做鼠标悬停和鼠标移开时使用了CSS usign :hover选择

<style> 
.wm_1 { 
    background-image: url(imagenes/footer/m/1.png); 
} 
.wm_1:hover { 
    background-image: url(imagenes/footer/m/1_down.png); 
} 
</style>

不需要JS的

为其余节点重复此CSS - 2,3,4 ... 9

来源

2012-09-26 00:16:28 Reflective

感谢@ahren，somethimes我很快比我更能处理:) – Reflective

通常情况下，您可以在所有元素上都有一个共同的类，您可以使用它们将它们全部定位到目标上;例如，在你的情况下，它可能是class='wm'。 class属性不必是唯一的（而id），所以这是一个合理的类。但是，即使它们是相似的，您也不需要for循环 - 只需使用attribute-starts-with selector即可用于一次全部定位它们。对于索引，属性设置器都有一个方法签名，它接受一个可以提供索引作为参数的函数。

$(document).ready(function() { 
    var $specialDivs = $("div[class^='wm'"); 

    $specialDivs 
     .show() 
     .css("background-image", function (i) { 
      return "url(imagenes/footer/m/" + i + ".png)"; 
     }); 
     .mouseenter(function() { 
      $(this).css("background-image", function (i) { 
       return "url(imagenes/footer/m/" + i + "_down.png)"; 
      }); 
      alert("this_down.png"); 
     }); 
     .mouseleave(function() { 
      $(this).css("background-image", function (i) { 
       return "url(imagenes/footer/m/" + i + ".png)"; 
      }); 
     }); 
});

然而，这一切仅仅是有用的，如果你~~确实有一些具体的事情要做~~（见校正）与这些节点，而不是悬停一个简单的CSS效果;那些应该简单的CSS来实现：

div[class^='wm']:hover { 
    background-image: ...; 
}

-As修正上述情况，我想你有不同的背景图像的每一个都是一个足够的理由来使用JS，而不是添加n CSS规则的事实以处理您的每个特殊块...

来源

2012-09-26 00:22:17 nbrooks

在循环变化的图像不起作用

回答

相关问题