Question

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

然而，当我点击一个按钮时，所有按钮同时出现。

如何解决此问题？

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

Answer 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");
}

Answer 3

要获取ID，您可以使用.attr（'id'）或.attr（'class'）来获取对象的类。

示例：

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


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

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

3 个答案: