javascript - jQuery，单击哪个元素(动态)？

Question

所以我对 jQuery 还很陌生。

我想做什么:

每当用户单击我的 ul 中的一个元素时，我需要该列表元素的 ID 并运行一个函数。 li 的名称类似于带有附加 _button 标记的 div。例如。

div id="test1"

li id="test1_button"

当前显示的 div-box 应该向左滑出，li 元素，它引用另一个 div，应该向右滑出。

这是我目前所拥有的:

function SH_GET_DIV() {
   $('nav ul li').each(function(){

         var SH_MENU_ELEMENTS=String($(this).attr('id'));
         var SH_BUTTONS=SH_MENU_ELEMENTS.indexOf('_button');

         if( SH_BUTTONS >= 0 ) {
            var SH_MENU_CLEARED_STRING = SH_MENU_ELEMENTS.replace('_button','');
            if( $('#'+SH_MENU_CLEARED_STRING).css('display') == 'block') {

            $('#'+SH_MENU_CLEARED_STRING).hide('slide', {direction: 'left'}, 500);

            } 
         }
         });

}

该函数为我提供了当前显示的框，以便脚本现在必须滑出哪​​个框。 这行得通

我也有这个，有效

例子:

$('#sh_test1_button').click(function() {
      SH_GET_DIV();

      $('#sh_test').show('slide', {direction: 'right'}, 400);

});

这是非常静态的，所以我试图将其构建得更加动态。

到目前为止我有这个:

$(document).on('click', 'nav ul li', function () {
    $(this.id).click(function() {
      SH_GET_DIV();

      $(this.id.replace('_button','')).show('slide', {direction: 'right'}, 400);

});
});

但是当我点击一个 li-Element 时没有任何反应。

所以我的问题是:

我如何动态构建它。我想知道点击了哪个li-Element，启动SH_GET_DIV()函数，让指向li-Element的div从右边滑入

再次:

li-ID 是这样构建的:

test1_button

test2_button

...

div-ID 是这样构建的

测试1

测试2

...

显然 test1_button 指的是 test1 等等。

谢谢!

Answer 1

试试这个

$('#'+$(this).attr("id").replace('_button','')).show('slide', {direction: 'right'}, 400);

代替

$(this.id.replace('_button','')).show('slide', {direction: 'right'}, 400);

对你有用。

谢谢