如何在 JavaScript FOR 循环中生成 JQuery 调用

How to generate JQuery calls inside JavaScript FOR loop?

本文关键字：JQuery 调用 循环 JavaScript FOR      更新时间：2023-09-26

我需要在 Javascript 函数中生成这 4 个 JQuery 调用：

$(".dropdown-menu .1_147").hover(
  function() { $("#1_147").show(); },
  function() { $("#1_147").hide(); }
);
$(".dropdown-menu .2_147").hover(
  function() { $("#2_147").show(); },
  function() { $("#2_147").hide(); }
);
$(".dropdown-menu .3_147").hover(
  function() { $("#3_147").show(); },
  function() { $("#3_147").hide(); }
);
$(".dropdown-menu .4_147").hover(
  function() { $("#4_147").show(); },
  function() { $("#4_147").hide(); }
);

我写了一个 Javascript 函数，FOR 循环只生成最后一个交互"4_147"。如何告诉 Javascript 生成 4 个 JQuery 调用？

我目前的JavaScript：

var submenu_navigation = document.getElementsByClassName("dropdown-menu");
var submenu_navigation_list = submenu_navigation[0].getElementsByTagName('li');
/*console.log(submenu_navigation_list);*/
function generateDropdownMenuMoldura(lis_array) {
    for (var item in lis_array) {
        var item_class_attr_name = lis_array[item].getAttribute('class');
        console.log(item_class_attr_name);
        $(".dropdown-menu ." + item_class_attr_name).hover(
          function() { $("#" + item_class_attr_name).show(); },
          function() { $("#" + item_class_attr_name).hide(); }
        );

    }   
}

generateDropdownMenuMoldura(submenu_navigation_list);

有什么线索吗？

此致敬意

更新：

我得到了解决方案：

/* Define the Elements that I need to loop */
var submenu_navigation = document.getElementsByClassName("dropdown-menu");
var submenu_navigation_list = submenu_navigation[0].getElementsByTagName('li');

function generateDropdownMenuMoldura(lis_array) {
    for (var item in lis_array) {
        var item_class_attr_name = lis_array[item].getAttribute('class');
        console.log(item_class_attr_name);
        (function(item_class_attr_name) {
            $(".dropdown-menu ." + item_class_attr_name).hover(
              function() { $("#" + item_class_attr_name).show(); },
              function() { $("#" + item_class_attr_name).hide(); }
            );
        })(item_class_attr_name);

    }   
}

generateDropdownMenuMoldura(submenu_navigation_list);

我的问题是：这个匿名函数调用是如何工作的？这是一种递归技术？

此致敬意

如何修复您的特定解决方案已经在另一个问题中得到了回答。

但为什么这么复杂呢？从您当前拥有的 JavaScript 来看，假设除了范围之外的所有内容都可以正常工作，更简单的解决方案是：

$(".dropdown-menu li").hover(function() { 
    $('#' + this.className).show(); 
}, function() { 
    $('#' + this.className).hide();
});

没有必要将不同的处理程序绑定到这些元素中的每一个，因为它们基本上都做同样的事情。

看看jQuery.each('dropdown-menu')方法。它适用于循环。

网页示例 

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

j查询示例

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});
相关文章：