JQuery - 重复类似的按钮答案

【问题标题】：JQuery - Repeat similar buttonsJQuery - 重复类似的按钮
【发布时间】：2013-10-31 03:03:24
【问题描述】：

按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>';
                    }

【问题讨论】：

你能不能也显示你的 html 标记......你的 for 循环在哪里......？
sounds Tabs 的东西，你可以检查其他人如何处理 tabs 或手风琴，比如 jquery ui。

标签： jquery button repeat

【解决方案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，它演示了如何添加处理程序。

【讨论】：

【解决方案2】：

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

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

这样更简洁，也许你甚至不需要一个类，如果你的所有链接都是 id 为 'menu' 的元素内的锚点，像 "$('#menu a')" 这样的东西就可以工作

【讨论】：

【解决方案3】：

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

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

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

【讨论】：