为每个用户显示 JQuery 弹出窗口答案

【问题标题】：JQuery Popup window showup for every user为每个用户显示 JQuery 弹出窗口
【发布时间】：2013-05-24 13:50:09
【问题描述】：

以下是我当前的代码 TechHunter。当我单击“是”按钮时，没有任何反应，弹出窗口看起来也没有使用 CSS 格式化。

<?php do { ?>
<div data-userid="<?php echo $row_users['id']; ?>" class="userTableBody">
    <div id="idRow"><?php echo $row_users['id']; ?></div>
    <div id="usernameRow"><?php echo $row_users['username']; ?></div>
    <div id="useremailRow"><a href="mailto:someone@example.com"><?php echo $row_users['email']; ?></a></div>
    <div id="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
</div> 
<?php } while ($row_users = mysql_fetch_assoc($users)); ?>

<div id="dialog-confirm" title="Delete user?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"> </script>
<script type="text/javascript" src="../include/js/script.js"></script>

这是我在 jsfiddle.net 上从您的示例中获取的 script.js 中的 JQuery 代码位置

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:250,
      modal: true,
      autoOpen:false,
      buttons: {
        "Yes": function() {
            var $this = $(this);
            $.ajax({
                url:'http://www.example.com/action/deleteUser.php?id='+$( this ).data('userid'),
                success:function(){$this.dialog( "close" )}
            });

        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

    $( ".toPopupButton" ).click(function() {
        var userid = $(this).parentsUntil('.userTableBody').parent().data('userid');
        console.log(userid);
      $( "#dialog-confirm" ).data('userid',userid).dialog( "open" );
    });
  });

我错过了什么吗？

【问题讨论】：

你不是说 $("a.topopup").click(function() 事件吗？（把#换成.）？
是的，请更改名为 toPopup 或类 topopup 的 ID，会变得非常混乱

标签： jquery function onclick

【解决方案1】：

它永远不会起作用，因为您在 php 循环中生成了多个具有相同 ID 的元素。将所有内容转换为基于类或 userId 的元素 ID。

<?php do { ?>
        <div data-userid="<?php echo $row_users['id']; ?>" class="userTableBody">
            <div class="idRow"><?php echo $row_users['id']; ?></div>
            <div class="usernameRow"><?php echo $row_users['username']; ?></div>
            <div class="useremailRow"><a href="mailto:someone@example.com"><?php echo $row_users['email']; ?></a></div>

            <div class="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
        </div> 


            <!-- Popup window -->
        <div class="toPopup"> 
            <div class="close"></div>
            <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
            <div class="popup_content">
            <p>Are you sure you want to delete this user?</p>
            <a href="action/deleteUser.php?id=<?php echo $row_users['id']; ?>">Yes</a>


            </div> <!--your content end-->
        </div> <!--toPopup end-->

    <?php } while ($row_users = mysql_fetch_assoc($users)); ?>

但我也建议使用 jQueryUI Dialog 即时生成弹出窗口，这将使您的代码更简洁。在这里提琴：

http://jsfiddle.net/techunter/LtcUX/

【讨论】：

这正是我所需要的，但是当我单击是按钮时，没有任何反应。另一件事是弹出窗口设计混乱，它没有像您在 jsfiddle.net 上那样显示设计。有什么建议吗？
你能帮我解决这个问题吗？
我已经包含了这个ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js，同样的事情又发生了。这是正确的吗？
编辑您的帖子并添加您的新修改，以便我看到它。您还需要包含 jqueryui css
我已经更新了上面的代码并添加了我目前正在使用的那个。让我知道需要改变什么。谢谢！

【解决方案2】：

有很多元素匹配这个选择器：

$("#toPopup").fadeIn(0500);

您需要指定要显示的内容。

你可以这样做：

在您的点击处理程序中，更改

loadPopup(); // function show popup

到

loadPopup($(this)); // function show popup

把 loadPopup() 改成这样：

function loadPopup($elem) { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $elem.closest('.userTableBody').next("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

我建议您稍微重构一下您的代码。为了符合标准，元素 ID 应该是唯一的。您可以向它们添加类以选择它们。

【讨论】：