0 
<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>的 .

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

我该如何解决这个问题？

4

3 回答 3

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>
于 2013-10-03T03:01:11.847 回答
0

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

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

function MyJQFunction() {
    var dialog = $(this).attr('data-dialog');
    $(dialog).dialog("open");
}
于 2013-10-03T03:03:57.977 回答
0

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

例子 ：

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


$('button').on('click',function() {
  var id = $(this).attr('id');
  alert(id);
});
于 2013-10-03T03:08:41.143 回答