Question

我正在动态创建带有附加div的html div，其作用类似于按钮（OpenMessageButton）。

这些div是消息的模板，并且基于查询填充了不同的信息，但html元素本身是相同的，包括他们使用的html类。

我想显示一个用于阅读邮件的向下滑动抽屉效果，但我遇到了尝试触发此效果的问题，因为它触发了所有邮件，而不是我点击了按钮中的特定邮件

我已经搜索过这个问题了，我找到的最近的是： bit of help

div代码

    <?php
          while($row = mysql_fetch_assoc($myMessages))
          {
          ?>

    <!-- First Div to be clicked -->
    <div class="OpenMessageButton">Click to Open/Close</div>

    <!-- Div to be shown when OpenMessageButton is clicked --> 
    <div class="panel panel-default messageContent" style="display:none;">
      <div class="panel-body">
        <h4 class="card-title">Message: </h4>
        <p class="card-text">Text.</p>
        <div class="OpenMessageButton">Open</div>
      </div>

    </div>

    <!-- Second Div to be clicked -->
    <div class="OpenMessageButton">Click to Open/Close</div>

    <!-- Div to be shown when OpenMessageButton is clicked -->
    <div class="panel panel-default messageContent" style="display:none;">
      <div class="panel-body">
        <h4 class="card-title">Message: </h4>
        <p class="card-text">Text.</p>
        <div class="OpenMessageButton">Open</div>
      </div>

    </div>

    <!-- Third Div to be clicked -->
    <div class="OpenMessageButton">Click to Open/Close</div>

    <!-- Div to be shown when OpenMessageButton is clicked -->
    <div class="panel panel-default messageContent" style="display:none;">
      <div class="panel-body">
        <h4 class="card-title">Message: </h4>
        <p class="card-text">Text.</p>
        <div class="OpenMessageButton">Open</div>
      </div>

</div>

我用来触发的jQuery如下：

$('.OpenMessageButton').on('click',function(){
      var link = $(this);      
      $('.panel.panel-default.messageContent').slideToggle('fast', function(){
        if ($(this).is(':visible')){
          link.text('Close');                    
        }else{
          link.text('Open');                    
        }
      });           
  });

按钮的标识符是OpenMessageButton，当单击任何一个按钮时，它会被触发，但jQuery会触发所有不需要的div。我想找出一种方法，当点击一个按钮时，只显示与该顶部div相关的div。

请参阅小提琴jQuery $(".class").click(); - multiple elements, click event once

- 更新 - （我很难得到建议的答案，所以我想我会发布完整页面的完整性）

<?php
require 'core/database/db_connect.php'; //DB Connection
require 'get_inbox_messages.php'; //Retrieves inbox msgs from db
require 'getprofile.php'; //Get Profile
?>

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-   scale=1">

        <title>BlackBook Profile</title>

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap theme -->
        <link href="css/bootstrap-theme.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="css/signin.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      </head>

      <body role="document">

        <!-- Fixed navbar -->
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand image" href="profile.php" ><img src="Graphics/topLogo3.png" alt="BookLove"></a>
              <a class="navbar-brand" href="#">LoveBook</a>
            </div>
           <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                <li ><a href="profile.php">Profile</a></li>

                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></a>
                <ul class="dropdown-menu">
                <li><a href="message_inbox.php">Inbox</a></li>
                <li><a href="sent_messages.php">Sent Messages</a></li>            
                </ul>
                </li>

                <li role="presentation"><a href="matched_users_output.php">Matches 
                <?php 
                $result = mysql_fetch_array($NewMatchesResult);

                if ($result[0][0] != 0) {
                  echo '<span class=badge>';
                  echo $result[0][0];    
                  echo '</span>';
                }                                                        
                ?>
                </a></li>
                <li ><a href="browse.php">Browse</a></li>

                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Options <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="changeprofilepic.html">Change Profile Pic </a></li>
                    <li><a href="payment.html">Payment Details</a></li>
                    <li><a href="populate_questions.php">Update Interests</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header"></li>
                    <li><a href="cancel.html">Cancel Account</a></li>
                    <li><a href="signin.html">Logout</a></li>
                  </ul>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>

        <div class="container theme-showcase" role="main">

          <div class="page-header" >
            <h1>
            <?php  $username = mysql_fetch_assoc($usernameResult);
            echo $username['username']. '\'s';?> Inbox</h1>                            
          </div>


          <?php
          while($row = mysql_fetch_assoc($myMessages))
          {      
            $subject = $row['subject'];
            $content = $row['content'];
            $recipientID = $row['recipient_id'];
            ?>

            <!-- Message Div -->
          <div class="row">
          <div class="col-md-12"><div class="card card-block messages">      
          <h4 class="card-title"><em>Subject: <?php echo $subject; ?></em></h4>
          <h4 class="card-title">From:      
          <?php
          echo $row['member_id'];       
          $from = mysql_query("SELECT username FROM members WHERE member_id = '$recipientID'");
          while($row = mysql_fetch_assoc($from)) {          
              echo $row['username']; }
          ?></h4>
          <!-- <p class="card-text">MESSAGE CONTENT.</p> -->
          <div class="OpenMessageButton">Open</div>
          <div class="ReplyMessageButton">Reply</div>
          <div class="MarkAsReadButton">Mark as Read</div>
          <div class="DeleteMessageButton">Delete</div>  
        </div>
        </div>
        </div>
        <!-- Opened Message Div  -->
        <div class="panel panel-default messageContent">
      <div class="panel-body">
        <h4 class="card-title">Message: </h4>
        <p class="card-text"><?php echo $content; ?>.</p>
      </div>
    </div>
      <?php
          }
        ?>

      <script>

      $('.OpenMessageButton').on('click',function(){
          var link = $(this);      
          $('.messageContent').slideToggle('fast', function(){
            if ($(this).is(':visible')){
              link.text('Close');                    
            }else{
              link.text('Open');                    
            }
          });           
      });


      //   $('.OpenMessageButton').on('click',function(){
      //     var link = $(this);      
      //     $('.panel').slideToggle('fast', function(){
      //       if ($(this).is(':visible')){
      //         link.text('Close');                    
      //       }else{
      //         link.text('Open');                    
      //       }
      //     });           
      // });
      </script>


        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/docs.min.js"></script>
      </body>
    </html>

Answer 1

这一行是问题所在：

  $('.panel.panel-default.messageContent') ....

您在这里匹配所有按摩。您必须找到一种方法来仅匹配属于单击按钮的消息。

其中一个解决方案可能是使用其他容器包装每个按钮+消息，如：

<div class="MessageContainer"> <!--added this container -->
    <!-- First Div to be clicked -->
    <div class="OpenMessageButton">Click to Open/Close</div>

    <!-- Div to be shown when OpenMessageButton is clicked --> 
    <div class="panel panel-default messageContent" style="display:none;">
      <div class="panel-body">
        <h4 class="card-title">Message: </h4>
        <p class="card-text">Text.</p>
        <div class="OpenMessageButton">Open</div>
      </div>

    </div>
</div>

然后你可以改变这个：

$('.panel.panel-default.messageContent')

到此：

link.closest('.MessageContainer').find('.panel.panel-default.messageContent')

这是工作示例

https://jsfiddle.net/rasa56j8/2/

Answer 2

您需要以某种方式将每个打开/关闭链接与其相应的div相关联。这是一种方法，使用div ids和jQuery的.data（）

<!-- Third Div to be clicked -->
<div class="OpenMessageButton" data-control="message3">Click to Open/Close</div>

<!-- Div to be shown when OpenMessageButton is clicked -->
<div id="message3" class="panel panel-default messageContent" style="display:none;">
  <div class="panel-body">
    <h4 class="card-title">Message: </h4>
    <p class="card-text">Text.</p>
    <div class="OpenMessageButton">Open</div>
  </div>

然后在JS：

$(document.body).on('click', '.OpenMessageButton', function(){
      var link = $(this);  
      var div_id = $(this).data('control');      
      $(div_id).slideToggle('fast', function(){
        if ($(this).is(':visible')){
          link.text('Close');                    
        }else{
          link.text('Open');                    
        }
      });           
  });

Answer 3

您应该使用jQuery方法next()，因为它只选择下一个元素（在您的情况下是带有类＆＃39; panel＆＃39;的div）而不是所有面板。

所以将你的js代码更改为：

$('.OpenMessageButton').click(function(){
      var link = $(this);      
      link.next().slideToggle('fast', function(){
        if ($(this).is(':visible')){
          link.text('Close');                    
        }else{
          link.text('Open');                    
        }
      });           
  });

Answer 4

由于您正在尝试切换jQuery事件源，因此您应该更改：

$('.panel.panel-default.messageContent').slideToggle('fast', function(){

到

$( this ).slideToggle('fast', function(){

jQuery doc说：

当jQuery调用一个处理程序时，this关键字是对它的引用事件交付的元素;对于直接绑定的事件这是附加事件和委托事件的元素事件这是一个元素匹配选择器。（请注意，这可能不是如果事件来自后代，则等于event.target element。）从元素创建一个jQuery对象，以便它可以与jQuery方法一起使用，使用$（this）。

我对如何实现该功能采取了不同的观点：

$('.OpenMessageButton').on('click', function() {
  var link = $(this);

  // If sub-text is already visible
  if (link.next().is(':visible')) {
    // Reset the link text
    link.text('Open');
    // Hide the sub-text
    link.next().hide();
  } else {
    // Reset the link text
    link.text('Close');
    // Show the sub-text
    link.next().slideToggle('fast', function(){ } );
  }
});

jQuery使用.on（'click'）独立控制许多重复的html元素

4 个答案: