Question

我需要在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);

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

最诚挚的问候，

Answer 1

看看jQuery.each('dropdown-menu')方法。这是循环。

HTML示例

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

jQuery示例

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

Answer 2

如何解决您的具体解决方案已经回答in an other question。

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

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

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

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

2 个答案: