如何获取点击元素的id并在jquery中打开一个弹出窗口

时间:2016-04-06 07:36:24

标签: javascript jquery html popupwindow

我有一些由Javascript创建的<div>个标签,每个标签都有不同的“id”和“class”属性。

div标签的一些示例

<div id="demoid1" onclick="javascript:openDialog(this)" class="demoClass1">demoTag1</div>
<div id="demoid2" onclick="javascript:openDialog(this)" class="demoClass2">demoTag2</div>
<div id="dialog-1" title="Test Case Details">
    <P>This my first jQuery UI Dialog!</P>
</div>

到目前为止完成的代码:

function openDialog(ev) {
var docid= ev.id;
 $(function () {
    $("#dialog-1").dialog({
        autoOpen: false,
    });
    $("#"+docid).click(function () {
        $("#dialog-1").dialog("open");
    });
});
}

请帮忙。 更新: 我有10-15个<div>标签和每个不同的ID。

我希望这些<div>代码可以点击,点击它会弹出一个小显示窗口。

在我需要点击元素的ID之前,我可以从JSON动态获取信息,以便我可以显示信息。

3 个答案:

答案 0 :(得分:0)

&#13;
&#13;
$(document).ready(function() {
   $(document).on('click', '#test', function (event) {
      alert($('#test').attr('id'));
       });
   });
&#13;
Try this :).
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="test">ghnhjg</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

考虑$m是jQuery函数对象的$

注意:这不是解决问题的好主意。应使用类选择器调用单击,数字数据应来自data-numeric属性或类似的东西。

试试这个:(步骤用注释解释。)

$m("[id^=demoid]").click(function () {
    $m(this).prop('id') // this is how you get id of the clicked element
    // now I am hoping you are trying to extract the numeric value from the id
    //for that you need to do the next line
    var numeric = $m(this).prop('id').replace('demoid', '');
    $m("#dialog-"+numeric).dialog("open"); // concatinate the numeric value to the #dialog-* 
});

答案 2 :(得分:0)

首先,您需要一些资源。检查this链接。

  

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

     

https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

     

https://code.jquery.com/ui/1.11.4/jquery-ui.js

这是fiddle的工作原理。

试试这个:

<div id="demoid1" class="demoClass">demoTag1</div>
<div id="demoid2" class="demoClass">demoTag2</div>
<div id="dialog-1" title="Test Case Details">
  <P>This my first jQuery UI Dialog!</P>
</div>

AND HTML:

Deployment target