Question

我有一个非常不优雅和繁琐的工作javascript：

//check if certain div (with higher main id) is clicked and then run a script

if (item.content.attr("id") == 'gridgallery1') {
  $('#grid1').grid();   // GALLERY initialisaion
} 
if (item.content.attr("id") == 'gridgallery2') {
  $('#grid2').grid();   // GALLERY initialisaion
}
if (item.content.attr("id") == 'gridgallery3') {
  $('#grid3').grid();   // GALLERY initialisaion
}

随附的HTML代码：

<div id="gridgallery1">
  <div id="grid1" data-directory="IMAGES/FIRST GALLERY"></div>
</div>

<div id="gridgallery2">
 <div id="grid2" data-directory="IMAGES/SECOND GALLERY"></div>
</div>

<div id="gridgallery3">
  <div id="grid3" data-directory="IMAGES/THIRDGALLERY"></div>
</div>

问题1。我想在一个简短优雅的If语句中重写上述If-Statements，对于涵盖'grid1'和'gridgallery1'所有内容的所有情况都适用通往'grid99'和'gridgallery99'的方法）如何重写上述If-Statement？

问题2。也许更好的方法是使用多类而不是ID。我想我可以将“id”更改为“class”，因为我不需要为每个添加的库容器更改html代码，但如果我更改：

if (item.content.attr("id") 成 if (item.content.attr("class")

然后它不再起作用了！我真正想要的只是一个javascript if语句，它找到所有这些实例和（所有这些类的div）并运行脚本。

<div class="gridgallery">
  <div class="grid" data-directory="IMAGES/FIRST GALLERY"></div>
</div>

<div class="gridgallery">
  <div class="grid" data-directory="IMAGES/SECOND GALLERY"></div>
</div>

<div class="gridgallery">
  <div class="grid" data-directory="IMAGES/THIRDGALLERY"></div>
</div>

Answer 1

问题1： 假设在item.content中存储了一个jQuery选择的元素：

$('#grid' + item.content.attr('id').split('gridgallery')[1] ).grid();

问题2：

我不确定你要做什么，但你应该阅读一些方便的jQuery方法，例如$('#someElement').hasClass('some-class')返回true或false

Answer 2

使用您在＆＃34;问题2＆＃34;下显示的HTML，您应该能够使用以下行替换if语句：

item.content.find('.grid').grid(); // GALLERY initialisaion

如何重写Javascript If-Statement以选择类而不是HTML中的ID

2 个答案: