代码之家 › 专栏 › 技术社区 › Jyotirmaya Prusty

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

popupwindow html jquery javascript

Jyotirmaya Prusty · 技术社区 · 8 年前

我有一些 <div> 由Javascript创建的标记,每个标记具有不同的“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 回复 | 直到 8 年前

SamGhatak 8 年前

首先,你需要一些资源。检查 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 它在哪里工作。

试试这个:

$(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");
          },
        }

      ],
    });
  });
});

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

Rakesh Lankapalli 8 年前

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

Roy 8 年前

考虑到 $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-* 
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前