单击时如何获取按钮的元素ID并在jquery ui中使用它答案

【问题标题】：how to get the button's element id when clicked and use it in jquery ui单击时如何获取按钮的元素ID并在jquery ui中使用它
【发布时间】：2013-10-03 02:59:16
【问题描述】：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $(".dialog").dialog( "open" );
}
</script>

 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" > <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>

我基本上是在使用 while 循环创建一个表。对于每个按钮和<p>，我正在分配特定的 ID。现在，我想获取这个 id，当点击按钮时，显示特定的<p>。

但是，当我单击一个按钮时，所有按钮都会同时出现。

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery loops while-loop

【解决方案1】：

你想得到按钮前面的对话框，你总是可以使用this关键字在其处理程序中引用按钮，然后使用prev来获取对话框div。您不一定需要至少具有您发布的结构的 id。

试试这个方法：

function MyJQFunction() {
    $(this).prev(".dialog").dialog( "open" );
    //to get the id of the dialog
     //$(this).prev(".dialog")[0].id;
}

更新

这将不起作用，因为 jquery 对话框是在单击按钮之前创建的，并且它们被放置在正文的底部。因此，将用于生成按钮的 php 代码更改为：

即附加一个data-target 属性来定位具有特定ID 的对话框。

<button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>

并将您的脚本更改为：

function MyJQFunction() {
    $($(this).data('target')).dialog( "open" );
}

完整代码：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {

    $(".dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 400
    },
    hide: {
        effect: "blind",
        duration: 400
    }
    });

    $( ".opener" ).on ('click',MyJQFunction);
});
function MyJQFunction() {
    $($(this).data('target')).dialog( "open" );
}
</script>
</head>
<body>
 <?php

 $x = 0;
 while($x < 5){
 $x = $x+1;

 $did1 = 'dialog'.$x;
 $did2 = 'opener'.$x;
 ?>

 <div class = "dialog" id= <?php echo $did1; ?>  title=<?php echo $did1; ?>>
 <p> <?php echo $did1; ?> </p>
 </div>

 <button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>

 <?php
 }//end of while loop
 ?>
</body>
</html>

【讨论】：

出于某种原因，这似乎无法解决我的问题。可以把我的代码发给你看看吗？我真的很感激。
@user2840665 请在问题本身中发布您的代码，如果不是我，其他人肯定会帮助您。
@user2840665 你有多少这些对话框和相应的按钮？
我有很多。对不起，我是 jquery 的新手，所以我不太擅长这个。 While 循环正在创建很多它们
@user2840665 你能显示呈现的 html... 你发布的内容似乎不是正确的结构。您是否还看到控制台中的任何错误，在您的代码中放置一些 debugger 语句并检查它是否完全进入处理程序，如果是，它是否正在获取 div 元素等。

【解决方案2】：

你应该像这样使用数据属性

<button class= "opener" data-dialog="<?php echo $did2; ?>"><?php echo $did2; ?> Contact</button>

function MyJQFunction() {
    var dialog = $(this).attr('data-dialog');
    $(dialog).dialog("open");
}

【讨论】：

【解决方案3】：

如果要获取对象的类，可以使用 .attr('id') 或 .attr('class') 来获取 ID。

例子：

<button id='12345'>12345</button>


$('button').on('click',function() {
  var id = $(this).attr('id');
  alert(id);
});

【讨论】：