如何將值傳遞給javascript onclick到jQuery函數

Question

我有這張圖片，上面有onclick函數

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

該調用哪個函數：

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

如何在div中顯示ID？

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

P / S：我有理由為什么我想直接使用onclick而不是直接使用jquery get val從圖像id上。

Answer 1

首先，您應該使用JavaScript附加事件。 您已經包含了jQuery，因此我們也可以使用它。 附加事件后，可以使用text()方法在目標div中設置span的innerText屬性。 嘗試這個：

<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

要顯示圖片ID，您可以使用

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

我建議您不要使用難看的內聯事件處理程序。 您可以使用jQuery綁定事件。 在這里，我向img元素添加了一個CSS類，然后我們可以使用Class Selector $(".class")綁定事件

的HTML

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

腳本

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

Answer 3

您可以這樣做。

 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

如果您使用的是HTML5，則可以使用data- *屬性。

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