相册功能开发：实现图片点击选中添加高亮边框效果

问题分析 #

• 所有图片使用了相同的id="lazy"，HTML中id必须唯一，这会导致选择器无法精准定位单个图片
• 事件绑定逻辑冗余，不需要遍历后再绑定到document，直接绑定到图片元素更高效
• 直接操作css()和data()不如用CSS类来管理选中状态，更易维护

修正后的代码 #

HTML 部分

<div class="demo-gallery">
  <ul id="lightgallery" class="list-unstyled grid">
    <?php foreach ( $media_items as $item ): ?>
      <li>
         <img class="img-responsive lazy" data-src="<?php echo $item->image_path_sd; ?>">
      </li>
    <?php endforeach; ?>
  </ul>
</div>

CSS 部分（新增，定义选中样式）

.img-responsive.selected {
  border: 4px solid #00CE6F;
}

jQuery 部分

// 给所有lazy类的图片绑定点击事件
$('.lazy').on('click', function() {
  // 切换selected类，自动处理选中/取消状态
  $(this).toggleClass('selected');
  // 若需获取当前选中状态，可使用：
  // console.log($(this).hasClass('selected'));
});

方案优势 #

• 将重复的id改为class，确保每个图片能被独立选中
• 用CSS类管理样式，后续调整样式只需修改CSS，无需改动JS
• toggleClass方法简化了状态切换逻辑，代码更简洁易读

内容的提问来源于stack exchange，提问作者user15639808