Question

我有一个包含8个div的列表：＃video1，＃video2，...每个点击时都要运行相同的javascript操作，但是有其他id（对于＃video1：show＃image1，＃preview1，... ）。

我可以更高效地执行此操作，而不是将相同的代码编写8次但使用其他ID吗？是否可以在单击时将每个#videoX中的第六个字符（数字）作为变量，然后使用这在代码中？

Answer 1

在您的事件处理程序中，您可以提取数字，例如使用regular expression ^[MDN]：

var id = element.id.match(/\d+$/)[0];

然后用它来创建其他元素的ID：

var image_id = "image" + id,
    preview_id = "preview" + id;

另一种选择是将data- attributes分配给元素，并使用它们来存储ID的数字部分。

Answer 2

请改用班级名称。这样它完全独立于ID。

<div class="videoClick" id="...">...</div>

JS：

$('.videoClick').click(function() {
...
})

Answer 3

是的，你可以：

$("div[id*='video']").click(function() {
   var numid = $(this).attr("id").replace("video", "");
   alert(numid);
   //...use your numid value
});

检查attribute contains selector。

Answer 4

试试这个

var ids = [#video1, #video2, #video3, #video4, #video5, #video6, #video7, #video8];

$(ids.join(",")).click(function(){
    var imageId = this.id.replace("video", "image");
    var previewId = this.id.replace("video", "preview");
    $("#"+imageId).show();
    $("#"+previewId).show();

});

使用ID的可变部分和js

4 个答案: