如何将值传递给javascript onclick到jQuery函数

Question

I have this this image with onclick function on it

<img id='1213' src='img/heart.png' onclick='heart(this.id)'>

which to call this function :

function heart(id) {
    $('#heart').dialog('open');
    return false;
}

How can i show the ID inside the div?

<div id="heart">
     Name : ABC
     ID : The ID need to be here 
</div>

P/S : i have reason why i want to use the onclick instead directly using the jquery get val from the image id directly.

Answer 1

Firstly, you should use JavaScript to attach your events. You've already included jQuery, so we may as well use that. Once you attach the event, you can use the text() method to set the innerText property of the span within the target div. Try this:

<img id="1213" class="heart" src="img/heart.png" />

<div id="heart">
     Name : ABC
     ID : <span></span>
</div>

$('.heart').click(function() {
    $('#heart span').text(this.id).dialog('open');
});

Answer 2

To show image id, You can use

$('#heart').html(id).dialog('open'); 

I would recommend you not to use ugly inline event handler. You can bind event using jQuery. Here I have added a CSS class to img element then we can use Class Selector $(".class") to bind event

HTML

<img class="myImage" id='1213' src='img/heart.png'>

Script

$(function() {          
    $('.myImage').on('click', function(){
        $('#heart').html(this.id).dialog('open'); 
    });
});

Answer 3

You can do it like this.

 function heart(id) { $('#heart').text(id).dialog(); return false; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <img id='1213' src='img/heart.png' onclick='heart(this.id);'> <div id="heart"> </div> 

Answer 4

If you are using HTML5, you could make use of data-* attribute.

<img id="someid" src="img/heart.png" data-id="1213"/>

    $('#someid').click(function(e) {
        var id = this.getAttribute("data-id");
        $('#heart').text(id).dialog('open');
    });