Question

我的页面会在隐藏文本字段中根据多个“页面”生成一个数字＆＃39;需要制作的。

计划是动态允许用户通过点击数字在页面之间切换（例如，如果我们有3个页面，他们可以点击1,2或3来显示每个页面。）

问题是页面数量因运行而异，但为了能够在js / jQuery中添加页面切换功能，我需要为每个页面创建一个.click（）方法按钮。

然而，因为页面数量不是一定的数量，我需要以某种方式动态创建这些方法 - 创建所需数量的方法，因此每个页面都有一个.click（）函数。

$("#page1" ).click(function() { 
          for(var i = 0; i < tableCount; i++){
              $("#usertable" + (i)).hide();
          }

          $("#usertable1").show();
    });

上面是我编写的一个简单函数的示例，该函数将在按下第一页按钮时执行，它会遍历所有页面，隐藏它们然后显示第一页。但是，如果我有5页，我需要以某种方式动态创建$（＆＃34;＃page2＆＃34;）.click（）函数和$（＆＃34;＃page3＆＃34;）.click（）函数等等。

有什么想法吗？

Answer 1

使用通用类和一些属性将有所帮助

<a class="page-link" href="#page1">Page 1</a>

<div id="page1" class="page-content"></div>

然后，一个单击处理程序适用于整个类链接。在任何jQuery事件处理程序this中是事件发生的元素

$('.page-link').click(function(){
     // hide whole class of content , filter for the one to show
     $('.page-content').hide().filter(this.hash).show();
});

或者对理解更加冗长

$('.page-link').click(function(){         
     var idSelector = $(this).attr('href'); // "#page1"
     $('.page-content').hide().filter(idSelector).show();    
});

Answer 2

您可以使用属性以选择器

开头

$("[id^=page]").click(function () {
  // do stuff
  var id = this.id.slice(-1);
  for (var i = 0; i < tableCount; i++){
    $("#usertable" + i).not("[id$=" id "]").hide();
  }
  $("#usertable" + id).show();
})

在jQuery中动态创建多种方法？

2 个答案: