时间戳

首页 > 解决方案 > 单击多个帖子具有相同的div类和按钮类时获取img src

jquery - 单击多个帖子具有相同的div类和按钮类时获取img src

问题描述

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>

$(function(){

    $('.like').click(function(e){
        e.preventDefault(); // prevent page reloading

        alert( $('.post-container').find('#img').attr('src'));

    });

});

</script>

<table id="posts">

    <% result.forEach(function(item){ %>

        <div class="post-container">
        <%= item.img_id%>
        <img src="<%= item.img_url %>" id="img" class="img">
        <div><%= item.user_id%> </div>
        <input type="button" name="like" id="like" value="Like" class="like">
        </div>

    <% }) %>

/* 执行后 ejs 模板看起来像 */

  <div class="post-container">
        1
     <img src="https://www.w3schools.com/images/picture.jpg" id="img" class="img">
     <div>UID001 </div>
     <input type="button" name="like" id="1" value="Like" class="like">
  </div>

  <div class="post-container">
        2
     <img src="https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_960_720.jpg" 
     id="img" class="img">
     <div>UID001 </div>
     <input type="button" name="like" id="2" value="Like" class="like">
  </div>

我想在点击下方按钮时提醒 img src，目前在点击 1 或 2 个帖子时给出 1 个帖子 img src。

标签： jqueryhtmlejs

解决方案

如果我理解正确，您可以使用.prev()或.parent()方法<img>准确查找标签：

$(function(){

    $('.like').click(function(e){
        e.preventDefault(); // prevent page reloading

        alert($(this).prev().prev().attr('src'));
        
        // or
        // alert($(this).parent().find('img').attr('src'));
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="post-container">
        1
     <img src="https://www.w3schools.com/images/picture.jpg" id="img" class="img">
     <div>UID001 </div>
     <input type="button" name="like" id="1" value="Like" class="like">
  </div>

  <div class="post-container">
        2
     <img src="https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_960_720.jpg" 
     id="img" class="img">
     <div>UID001 </div>
     <input type="button" name="like" id="2" value="Like" class="like">
  </div>

注意：从 jquery 1.6 版本开始，您可以使用.prop()方法来获取src属性值，而不是.attr()方法：

alert($(this).parent().find('img').prop('src'));

推荐阅读