Giúp sửa lỗi hình bị trùng Jquery mặc dù src hoàn toàn khác nhau

[Nguyen_Tung (Nguyễn Tùng)]

var list = [];
$(document).ready(function(){
    $(".addToCompare").click(function(){
        $(".comparePanle").show();
        var productID = $(this).parents('.selectProduct').attr('data-title');
       
        var display = document.getElementById("cm");
        if(display.style.display = "none"){
            document.getElementById("cm").style.display = "block";
        } 
            list.push(productID);
                var displayTitle = $(this).parents('.selectProduct').attr('data-title');
                var displayPrize = $(this).parents('.selectProduct').attr('data-prize');
                var image = $(".image").attr('src');
                $(".comparePan").append(
                    '<div id="' + productID + '" style="font-size:15px "class="productPart titleMargin w3-margin-bottom   w3-col l3 m4 s4"><div class="w3-white"><a class="selectedItemCloseBtn w3-closeBtn">X</a><img src="' + image + '"style="height:100px;"/><p id="' + productID + '" class="titleMargin1">' + displayTitle + '</p><p id="' + productID + '" class="titleMargin1">' + displayPrize + '</p></div></div>');
                $(document).on('click','.selectedItemCloseBtn',function () { 
                    $(this).parents(".productPart").remove();
                    if(!$(".productPart").length){
                        $(".comparePanle").hide(); 
                    }
    });
    });
    $(".closeComparePanle").click(function(){
        $(".productPart").remove();
        $(".comparePanle").hide();    
    });
});

Mình xin cảm ơn ạ

[bossageek]

vì code của bạn đang access vào DOM thông qua class name

var image = $('.image').attr('src');

và nguyên nhân là do bạn có 1 đống HTML dùng chung class name này nên jquery sẽ lấy attribute src của DOM đầu tiên có dùng class này

[Nguyen_Tung (Nguyễn Tùng)]

vậy mình sửa làm sao để nó có thể truy cập từng src được ạ?

[Thai_Ba_Huy (Thái Bá Huy)]

Thử dùng kiểu này xem

img src='12346.png' id='img_12346'

a class='addToCompare' data-id='img_12346'

var id_img = $(this).data('id');
$('#'+id_img).attr(src);

[HR16 (Gà Coder)]

Khi dùng jQuery để lấy DOM element thì nó sẽ trả về một cái jQuery object bọc các DOM element ở bên trong. Nếu muốn lấy từng cái thì có hai cách:

1. Dùng method each() của jQuery để lấy từng element.

$('.image').each((i, el) =. {
  console.log(el.src)
});

2. Lấy số element bằng thuộc tính length rồi dùng method eq() để lấy jQuery object.

let image_list = $(".image")
for (let i = 0; i < image_list.length; i++){
     console.log(image_list.eq(i).attr("src"))
}