使用 for 循环识别 html .classes (jQuery)答案

【问题标题】：using a for loop to identify html .classes (jQuery)使用 for 循环识别 html .classes (jQuery)
【发布时间】：2016-04-22 16:21:54
【问题描述】：

我正在使用 simplepie 提取两个 RSS 提要。使用 PHP foreach 循环，然后我 echo 将每个提要帖子包含在 .story_overview 类中的信息，并为每篇文章添加 .pin 类。我在 PHP foreach 到 hide.story_overview 中使用 jQuery，并在 .story_overview 和相应的 .pin 类的末尾添加一个唯一标识号，这是有效的：

<script>
    $('.story_overview').hide();
    $('.pin').attr('class','pin' + i);
    $('.story_overview').attr('class','story_overview' + i);   
    i++;
</script>

我试图达到期望的结果，将鼠标悬停在 .pin 上，显示相应的 .story_overview（所以.pin1 将显示 .story_overview1）。我目前正在尝试使用 JavaScript for 循环来执行此操作，但它拒绝工作：

<script>
    for (x = 0; x <= i; x++){
        $('.pin'+ x.toString()).mouseover(function(){
            $('.story_overview' + x.toString()).show();
        });

        $('.pin'+ x.toString()).mouseout(function(){
            $('.story_overview' + x.toString()).hide();
        }); 
    };
</script>

我已经通过尝试相同的代码测试了所有的 jQuery 命令，但在类名末尾添加了标识号（而不是 x.toString）并将代码放在 @987654337 之外@循环，一切正常。

任何帮助都将不胜感激！提前致谢。

【问题讨论】：

您的i 设置在哪里？并且不要使用 for 循环来绑定事件。改用类。
坏主意！！！而是使用通用类名来绑定事件。

标签： javascript php jquery html for-loop

【解决方案1】：

你可以这样做：

  $('.pin').mouseover(function(){
            $('.story_overview').eq($(this).index()).show();
   }).mouseout(function(){
            $('.story_overview').eq($(this).index()).hide();
   });

您可以通过使用.eq() 方法和.index() 来获得所需的输出以获取悬停元素的索引。

或者你可能会喜欢这样：

  $('.pin').mouseover(function(){
            $('.story_overview'+$(this).index()).show();
   }).mouseout(function(){
            $('.story_overview'+$(this).index()).hide();
   });

【讨论】：