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

Question

我有一些由 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> 标签是可点击的，点击它会弹出一个小显示 window。

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

Answer 1

$(document).ready(function() {
   $(document).on('click', '#test', function (event) {
      alert($('#test').attr('id'));
       });
   });

Try this :).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="test">ghnhjg</div>

Answer 2

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

注意：这不是解决问题的好主意。单击应使用 class 选择器调用，数字数据应来自 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-* 
});

Answer 3

首先，您需要一些资源。检查 this link.

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 它的工作场所。

然后试试这个：

$(document).ready(function() {
  $(".demoClass").click(function() {
    $("#dialog-1").dialog({
      resizable: false,
      height: 140,
      modal: true,
      buttons: [{
          text: "Yes",
          click: function() {
            $(this).dialog("close");
          },
        }, {
          text: "No",
          click: function() {
            $(this).dialog("close");
          },
        }

      ],
    });
  });
});

AND HTML:

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

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

How to get the clicked elements' id and open a popup in jquery

javascript

jquery

html

popupwindow