Question

这是我的代码：

$('.image1').click(function(){ 
    $('.loader').show();
    function preloadImages(images, callback) {
        var count = images.length;  
        var loaded = 0;
        $(images).each(function() {
            $('<img>').attr('src', this).load(function() {
                loaded++;
                if (loaded === count) {
                    callback();
                }
            });
        });
    }; 

    preloadImages(["../images/Wedding_p/large/1.jpg",                                      
           "../images/Wedding_p/large/2.jpg",
           "../images/Wedding_p/large/3.jpg", 
           "../images/Wedding_p/large/4.jpg",
           "../images/Wedding_p/large/5.jpg"],    function() {
               alert("DONE");
               // In here I need to get id of '.image1' image.
           }

这是html：

<div>
    <img src = '1.jpg' data-id='1' class = 'image1'>
    <img src = '2.jpg' data-id='2' class = 'image1'> 
    <img src = '3.jpg' data-id='3' class = 'image1'>
</div>

当我点击图片时，我需要点击图片的数据ID;如何使用我的jQuery代码获取它。

Answer 1

$(document).ready(function() {
  
  $("img").click(function() {
        alert($(this).attr('data-id')); 
 });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
     <img src = '1.jpg' data-id='1' class = 'image1'>
         <img src = '2.jpg' data-id='2' class = 'image1'> 
         <img src = '3.jpg' data-id='3' class = 'image1'>

</div>

Answer 2

试试这个：

$(document).on('click', '.image1', function() {
   alert($(this).data("id"));
});

Answer 3

您可以使用以下代码获取data-id属性的值

$(this).attr('data-id');

我需要使用jQuery从HTML获取id

3 个答案: