2
ボタン（OpenMessageButton）のように機能するdivを動的に作成しています。jQuery .on（ 'click'）を使用して複数のhtml要素を独立して制御する
これらのdivはメッセージのテンプレートであり、クエリに基づいてさまざまな情報が入力されますが、html要素自体は、使用するhtmlクラスを含めて同一です。
私はメッセージを読み取るための引き出しの影響下にスライドを表示したいが、私はそれが私が
のボタンをクリックした特定のメッセージとは対照的に、すべてのメッセージのためのトリガーとして、この効果をトリガーしようとすると問題があります私はこの質問で検索しましたし、私が見つけた最寄のはこれです：私はトリガするために使用していた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のため jQuery $(".class").click(); - multiple elements, click event once
コードは次のとおりです。
$('.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');
}
});
});
ボタンの識別子は、ボタンのいずれかがクリックされたときにトリガまだjQueryの望まれないすべてのdivをトリガしますOpenMessageButtonあります。私はボタンがクリックされたときにそのトップdivに関連するdivだけが表示される方法を理解したいと思います。
フィドルhttps://jsfiddle.net/rasa56j8/
を参照してください - UPDATE - （私が提案答えが働いて得るのに苦労していますので、私は、私は完全を期すため、完全なページをポストだろうと思った）
<?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>
私は私がこれまで私が持っている – roryjmaher