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而不是直接使用图像ID中的jquery get val。

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

你可以这样做。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何将值javascript onclick传递给jquery函数

4 个答案: