Question

按下menu_i_j时我需要打开page_i_j，但i和j不是固定值。

for(var i=0; i<10; i++){
   for(var j=0; j<10; j++){
            $('#menu_page_'+$i+'_'+$j+'').click(function(){
            if($('#page_'+$i+'_'+$j+'').is(':hidden')){
                 $('#page_'+$i+'_'+$j+'').fadeIn(200);
            }
        });
    }
}

html / php按钮[#menu_page_i_j]（有点乱，对不起）：

for($i=1;$i<=$menu_quant;$i++) {
                echo '
                    <a href="#"><div class="menu">
                        <div class="menu_title">
                            '.${'menu_title_'.$i}.'
                        </div>
                        <a href="">
                        <div class="menu_options">
                            ';for($j=1;$j<=${'menu_options_'.$j.'_quant'};$j++) {
                                echo '<a href="#?m='.$i.'&s='.$j.'"><font color="#1d70b3"><div id="menu_page_'.$i.'_'.$j.'"class="menu_options_hover">'.${'menu_options_' .$i. '_' .$j}.'</div></font><br></a>';
                                }echo '
                        </div>
                        </a>
                    </div></a>';
                    }

Answer 1

您无需迭代i和j的值来设置处理程序。您可以使用单个选择器：

$("[id*='button_i'][id*='_j']").click(function(e) {
    var selector = '#page' + e.target.id.slice(e.target.id.indexOf('_'));
    if($(selector).is(':hidden')){
        $(selector).fadeIn(200);   
    }
});

这是一个fiddle，演示了如何添加处理程序。

Answer 2

我想这样做，首先，为这些菜单项添加一个类，比如“class ='menu_button'”，然后执行：

$('.menu_button').on('click',function(){
  id = this.id.replace('button','page');
  if ($('#'+id).is(':hidden')) $('#'+id).fadeIn(200)
})

那个更干净，也许你甚至不需要课程，像“$（'＃menu a'）”这样的东西可以工作，如果你的所有链接都是一个带有'菜单'的元素内的锚点

Answer 3

$('.menu_options').on('click', 'a', function(){
    var $this = $(this);

    if ($this.is(':hidden')) {
        $this.fadeIn(200);
    } 
});

这是性能更好的解决方案。将处理程序附加到父元素，它会在事件冒泡时捕获事件。

JQuery - 重复类似的按钮

3 个答案: