单击时如何获取按钮的元素ID并在jQuery UI中使用它
[英]how to get the button's element id when clicked and use it in jquery ui
问题描述
<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
?>
I am basically creating a table using the while loop. 
我基本上是使用while循环创建一个表。 For each button and <p> I am assigning specific id. 我为每个按钮和<p>分配了特定的ID。 Now, I want to grab this id and when the button is clicked, show that specific <p> . 现在，我想获取此ID，然后单击按钮时，显示特定的<p> 。
However, when I click one button, all buttons come up at the same time. 但是，当我单击一个按钮时，所有按钮都会同时出现。
How can I fix this issue? 如何解决此问题？
3 个解决方案
解决方案1
1 已采纳 2013-10-03 03:01:11
You want to get the dialog that is preceding the button, you can always refer to the button inside its handler with this keyword and then use prev to grab the dialog div. 您想获得按钮之前的对话框，您始终可以使用this关键字在其处理程序内引用按钮，然后使用prev来获取对话框div。 You dont necessarily need the id atleast with the structure you have posted. 您不一定需要具有已发布结构的ID至少。
Try this way: 尝试这种方式：
function MyJQFunction() {
$(this).prev(".dialog").dialog( "open" );
//to get the id of the dialog
//$(this).prev(".dialog")[0].id;
}
Update 更新
This won't work since jquery dialog gets created prior to the button click and they are placed in the bottom of the body. 这将不起作用，因为在单击按钮之前创建了jquery对话框，并且将它们放置在主体的底部。 So change you php code for button generation to: 因此，将用于按钮生成的php代码更改为：
ie Attach a data-target attribute to target the dialog with particular id. 即，附加data-target属性以使用特定ID定位对话框。
<button class= "opener" data-target="#<?php echo $did1; ?>"> <?php echo $did2; ?> Contact</button>
and change your script to: 并将您的脚本更改为：
function MyJQFunction() {
$($(this).data('target')).dialog( "open" );
}
Full Code: 完整代码：
<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>
解决方案2
0 2013-10-03 03:03:57
You should use a data attribute like so 您应该像这样使用数据属性
<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
0 2013-10-03 03:08:41
To get the ID you can use .attr('id') or .attr('class') if you want to get the class of the object. 要获取ID，可以使用.attr（'id'）或.attr（'class'）来获取对象的类。
Example : 范例：
<button id='12345'>12345</button>
$('button').on('click',function() {
var id = $(this).attr('id');
alert(id);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.