如何重写Javascript If语句以选择Classes而不是ID's的HTML格式

How to rewrite a Javascript If-Statement to select Classes instead of ID's in HTML

本文关键字：ID 格式 HTML Classes 重写 何重写 Javascript 选择 语句 If      更新时间：2023-09-26

我有一个工作的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语句，对于从'grid1'和'gridgallery1'到'grid99'和'gridgallery99'的所有情况都是正确的）如何重写上面的If语句？

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

if (item.content.attr("id")进入if (item.content.attr("class")

那就不管用了！我真正想要的只是一个JavaScriptIf语句，它可以找到所有这些实例和（所有具有这些类的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>

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

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

问题2:

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

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

item.content.find('.grid').grid(); // GALLERY initialisaion
相关文章：