[英]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
?>
我基本上是使用while循环创建一个表。 我为每个按钮和<p>分配了特定的ID。 现在，我想获取此ID，然后单击按钮时，显示特定的<p> 。
但是，当我单击一个按钮时，所有按钮都会同时出现。
如何解决此问题？
您想获得按钮之前的对话框，您始终可以使用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>
您应该像这样使用数据属性
<button class= "opener" data-dialog="<?php echo $did2; ?>"><?php echo $did2; ?> Contact</button>
function MyJQFunction() {
var dialog = $(this).attr('data-dialog');
$(dialog).dialog("open");
}
要获取ID，可以使用.attr（'id'）或.attr（'class'）来获取对象的类。
范例：
<button id='12345'>12345</button>
$('button').on('click',function() {
var id = $(this).attr('id');
alert(id);
});
单击按钮时如何使用angluarJS获取父元素？
[英]how to use angluarJS to get the parent element when a button is clicked?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.