基於最接近的複選框獲取圖像jquery

Question

我試圖讓所有圖像最接近最近的複選框被選中。例如，假設有三張照片和兩張選中的照片，我會希望將最接近的圖像放到複選框（圖像位於複選框上方），並使用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> 

下面是截圖，可以幫助更好地解釋： https://imgur.com/9LULfhv

正如你所看到的，它只是讓第一個圖像，而不是其他人，即使他們被檢查。

任何幫助，將不勝感激。

謝謝！

Answer 1

我一個數組我不完全確定你想要做什麼，但是這會讓你得到一個每當任何複選框發生變化時都會被檢查的列表。

編輯：現在有更多評論！

// 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); 
}); 

這裏有一個JS fiddle，但它顯然不顯示圖像。

編輯：要解釋什麼是在原來問題的代碼和代碼在這個答案之間的不同：

// 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')); 
     }); 
    } 
}); 

Answer 2

我在這裏上傳了一個片段，你也可以看到結果。

Here it is.

我指望複選框的數量和做他們每個人一個循環來檢查，如果他們進行檢查，如果是得到了SRC VAL到名爲「photoarray」

Answer 3

你可以隨便找家長和找到照片級圖像。

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); 
});