jquery - 使用jquery从图像元素列表中获取特定图像元素的数据id属性值？

Question

我有一个产品表和产品图像表。每个产品可能有多个图像。在产品编辑表单中，我渲染了该产品的所有图像。我想通过单击每个图像中包含的十字按钮来删除每个图像。

为了删除特定图像，我需要图像 ID，因此我使用data-id属性传递了该 ID。但是，当我单击十字按钮时，我总是得到第一个图像 ID。我需要那个点击的图片ID。我怎么才能得到它？

$(document).on("click", "#imagePosition", function() {
  var id = $("#singleImage").attr("data-id");
  console.log(id);
  
  $.ajax({
    type: 'GET',
    url: "/destroySingleImage",
    dataType: 'json',
    data: {
      id: id
    },
    success: function(data) {
      console.log('hi');
      alert("added to cart");
    }
  });
});

<label for="images">Product Images :</label> @if(count($product->images)> 0)
<div class="row">
  @foreach ($product->images as $image)
  <div style="position:relative;">
    <button type="submit" class="close imagePosition" id="imagePosition">
      <span>&times;</span>
    </button>
    <img alt="preview image" id="singleImage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="{{$image->id}}" style="width:300px;height:300px; margin:5px;">
  </div>
  @endforeach
</div>
@endif

标签： jquerylaravel

Answer 1

id主要问题是因为您的循环正在生成具有多次重复相同属性的 HTML 元素。这是无效的，因为id属性的值在 DOM 中必须是唯一的。

要解决此问题，请删除id并改为使用class属性。然后，您可以从引用遍历 DOM，button从而引发 click 事件以查找相关.singleimage元素并读取其data-id.

另请注意，我对逻辑进行了一些调整以满足最佳实践，例如在处理数据属性时使用data()代替attr()，以及将 CSS 规则放在外部样式表中而不是内联style属性中。

说了这么多，试试这个：

$(document).on("click", ".imagePosition", function() {
  var id = $(this).next('.singleimage').data('id');
  console.log(id);

  // AJAX request here...
});

.row>div {
  position: relative;
}

.singleimage {
  width: 300px;
  height: 300px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="images">Product Images :</label>
<div class="row">
  <div>
    <button type="submit" class="close imagePosition">
      <span>&times;</span>
    </button>
    <img alt="preview image" class="singleimage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="001" />
  </div>
  
  <div>
    <button type="submit" class="close imagePosition">
        <span>&times;</span>
      </button>
    <img alt="preview image" class="singleimage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="002" />
  </div>
  
  <div>
    <button type="submit" class="close imagePosition">
      <span>&times;</span>
    </button>
    <img alt="preview image" class="singleimage" src="{{asset('storage/'.$image->image)}}" alt="image" data-id="003" />
  </div>
</div>