基于最近的复选框jquery获取图像

我正在尝试获取与选中的最近复选框最接近的所有图像。例如，假设有三张照片，其中两张被选中，我希望得到离复选框最近的图像（图像位于复选框上方），并使用jQuery将图像的src放入一个数组中。然而，我只是幸运地得到了第一张图片，而没有检查其他图片。图像列表取决于相册中的图像数量（从PHP获取并通过ajax发送到页面）

这是我的密码：

$('.w3-check').on('change', function() {
    if ($(this).is(':checked')) {
        // get the image that is by the check box
        $('.w3-third').find('.w3-card-2, .w3-margin, img.photo').each(function() {
            console.log($('img.photo').attr('src'));
        });
    }
});

html-

<div class="w3-third" style="width: 32.5%; max-height: 200px;">        
       <div class="w3-card-2 w3-margin">                                 
          <img class="photo" src="/images/profile/fooboy/albums/test album_2017-07-14/downfall-frother.jpg" style="width: 100%; max-height: 150px; padding-bottom: 5px;">                                                     
          <input class="w3-check" type="checkbox" name="delete_downfall-frother.jpg" id="delete_downfall-frother.jpg">                             
          <label for="delete_downfall-frother.jpg">&nbsp;Check to Delete</label>                                                             
       </div>                                                            
       <br>                                                            
</div>


<div class="w3-third" style="width: 32.5%; max-height: 200px;">          
        <div class="w3-card-2 w3-margin">                                    
             <img class="photo" src="/images/profile/fooboy/albums/test album_2017-07-14/crooked.jpg" style="width: 100%; max-height: 150px; padding-bottom: 5px;">                                                             
               <input class="w3-check" type="checkbox" name="delete_crooked.jpg" id="delete_crooked.jpg">                                                   
               <label for="delete_crooked.jpg">&nbsp;Check to Delete</label>
       </div>                                                                
       <br>                                                                
    </div>

    <div class="w3-third" style="width: 32.5%; max-height: 200px;">
         <div class="w3-card-2 w3-margin">
           <img class="photo" src="/images/profile/fooboy/albums/test album_2017-07-14/cref.jpg" style="width: 100%; max-height: 150px; padding-bottom: 5px;">                                                             
               <input class="w3-check" type="checkbox" name="delete_cref.jpg" id="delete_cref.jpg">                                                      
               <label for="delete_cref.jpg">&nbsp;Check to Delete</label>  
         </div>                                                              
        <br>                                                               
    </div>

勾选删除


勾选删除


勾选删除

以下是一个屏幕截图，可以更好地解释：

如您所见，它只获取第一个图像，而不获取其他图像，即使它们已被选中

任何帮助都将不胜感激

---

谢谢

我在这里上传了一个片段，您也可以看到结果

---

我正在计算复选框的数量，并对每个复选框进行循环，以检查它们是否被选中，如果是，则将src val放入一个名为“photoarray”的数组中。

我不完全确定您正在尝试做什么，但这将为您提供一个每当任何复选框被更改时都会被选中的所有内容的列表

编辑：现在有更多评论

// Attach an event handler when any check box is changed.
$('.w3-check').on('change', function() {
    var arr = [];
    // Iterate over *all* checked input.w3-check elements inside any element
    // that is both .w3-card-2 and .w3-margin.
    $('.w3-card-2.w3-margin input.w3-check:checked').each(function(index, checkbox) {
      // Get the jQuery representation of the checkbox (second parameter
      // in the each handler).
      var $checkbox = $(checkbox);

      // Get the closest parent of that checkbox that is both
      // .w3-card-2 and .w3-margin.
      var $card = $checkbox.closest(".w3-card-2.w3-margin");

      // Within that parent, find a child that is an img.photo element.
      var $img = $card.find("img.photo");

      // Add the src attribute of that element to the array.
      arr[arr.length] = $img.attr('src');
    });
    console.log(arr);
});

这里有一个，虽然它显然不显示图像

编辑：要解释原始问题中的代码与此答案中的代码之间的区别：

// This is the same; attach an event handler when a check box changes.
$('.w3-check').on('change', function() {
    // Check to see if the current check box is checked.
    if ($(this).is(':checked')) {
        // From within *all* .w3-third elements, find *all*
        // .w3-card-2 elements, all .w3-margins elements, and
        // all img.photo elements and iterate over them.
        $('.w3-third').find('.w3-card-2, .w3-margin, img.photo').each(function() {
            // For each element matching that condition,
            // find *all* img.photo elements in the entire page, since
            // $(selector) searches the whole page, then get the src
            // attribute of the first match since attr doesn't return
            // a result for each item in the jQuery result set.
            console.log($('img.photo').attr('src'));
        });
    }
});

---

您只需查找父级并找到带有类照片的图像

var images = [];
$('.w3-check').on('change', function() {
    var src = $(this).parent().find('img.photo').attr('src');
    if ($(this).is(':checked')) {
        // get the image that is by the check box
        images.push(src);
    } else {
        images.splice(images.indexOf(src), 1);
    }
    console.log(images);
});