我正在使用按按钮添加帖子的发布系统，添加的帖子有两个按钮，一个用于显示/隐藏内容，另一个用于删除内容。 我使用jQUERY事件slideToggle隐藏和显示内容，并将按钮上的文本从显示更改为隐藏，反之亦然，但是与同一类相关的所有帖子的所有按钮上的文本都更改了，而无需单击其按钮。点击它
$(document).ready(function() {
$("body").on("click", ".view", function() {
$(this).parent().siblings(".card-body").slideToggle(2000, function() {
if ($(this).css("display") == "none") {
$(".view").text(' Show');
} else {
$(".view").text(' Hide');
}
$(".view").toggleClass("fa-eye-slash");
});
});
var i = 1
$("body").on("click", "input.btn-primary", function() {
var x = $("textarea").val();
var title = $("#title").val();
var article = $('<div class="card" id="article-' + i + '"><div class="card-header"> <div class="card-text text-center"><h5> ' + title + ' </h5></div></div><div class="card-body"><div class="card-text text-justify"><p>' + x + '</p> </div> </div> <div class="card-footer text-right"> <button class="btn btn-primary view fas fa-eye"> Hide</button> <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button> </div> </div>');
$(".card-columns").append(article);
i++;
});
$("body").on("click", ".btn-danger", function() {
$(this).parents(".card").remove();
});
$('input[value="Add Article"]').attr('disabled', true);
$('textarea').on('keyup', function() {
var x = $("textarea").val();
var title = $("#title").val();
if (x != '' && title != '') {
$('input[value="Add Article"]').attr('disabled', false);
} else {
$('input[value="Add Article"]').attr('disabled', true);
}
});
});.user-name {
background-color: #d4d4d4;
line-height: 150px;
}
.comment-form {
margin: auto;
width: 70%
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<header>
<div class=" user-name alert text-center mt-3 border-primary">
User Name /Blog
</div>
</header>
<section class=" row comment-form">
<div class="card bg-light col-12 p-0 ">
<div class="card-header bg-primary text-white text-center">
Add A New Comment
</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="title" class="col-form-label col-sm-2"> Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Write Your Title" id="title">
</div>
</div>
<div class="form-group row">
<label for="comment" class="col-form-label col-sm-2"> Content</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" placeholder="Write Your Content" id="comment"></textarea>
</div>
</div>
<input class="btn btn-primary float-right" value="Add Article">
</form>
</div>
</div>
</section>
<section class="mt-3">
<div class="col-12">
<div class="card-columns">
<div class="card" id="article-1">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
<div class="card" id="article-2">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
<div class="card" id="article-3">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 0 :(得分：1)
更改.view上的功能，然后点击
$("body").on("click",".view", function(){
$(this).parent().siblings(".card-body").slideToggle(2000, function(){
if ($(this).css("display")=="none"){
$(this).next("div.card-footer").find(".view").text(' Show')
}else{
$(this).next("div.card-footer").find(".view").text('Hide');
}
$(".view").toggleClass("fa-eye-slash");
});
});
答案 1 :(得分：0)
另一种方法
$(document).ready(function() {
$("body").on("click", ".view", function() {
$(this).parent().siblings(".card-body").slideToggle(2000, function() {
if ($(this).css("display") == "none") {
$(this).siblings("div.card-footer").find(".view").text(' Show')
//$(".view").text(' Show');
} else {
$(this).siblings("div.card-footer").find(".view").text(' Hide')
//$(".view").text(' Hide');
}
$(".view").toggleClass("fa-eye-slash");
});
});
var i = 1
$("body").on("click", "input.btn-primary", function() {
var x = $("textarea").val();
var title = $("#title").val();
var article = $('<div class="card" id="article-' + i + '"><div class="card-header"> <div class="card-text text-center"><h5> ' + title + ' </h5></div></div><div class="card-body"><div class="card-text text-justify"><p>' + x + '</p> </div> </div> <div class="card-footer text-right"> <button class="btn btn-primary view fas fa-eye"> Hide</button> <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button> </div> </div>');
$(".card-columns").append(article);
i++;
});
$("body").on("click", ".btn-danger", function() {
$(this).parents(".card").remove();
});
$('input[value="Add Article"]').attr('disabled', true);
$('textarea').on('keyup', function() {
var x = $("textarea").val();
var title = $("#title").val();
if (x != '' && title != '') {
$('input[value="Add Article"]').attr('disabled', false);
} else {
$('input[value="Add Article"]').attr('disabled', true);
}
});
});.user-name {
background-color: #d4d4d4;
line-height: 150px;
}
.comment-form {
margin: auto;
width: 70%
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<header>
<div class=" user-name alert text-center mt-3 border-primary">
User Name /Blog
</div>
</header>
<section class=" row comment-form">
<div class="card bg-light col-12 p-0 ">
<div class="card-header bg-primary text-white text-center">
Add A New Comment
</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="title" class="col-form-label col-sm-2"> Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Write Your Title" id="title">
</div>
</div>
<div class="form-group row">
<label for="comment" class="col-form-label col-sm-2"> Content</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" placeholder="Write Your Content" id="comment"></textarea>
</div>
</div>
<input class="btn btn-primary float-right" value="Add Article">
</form>
</div>
</div>
</section>
<section class="mt-3">
<div class="col-12">
<div class="card-columns">
<div class="card" id="article-1">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
<div class="card" id="article-2">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
<div class="card" id="article-3">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 2 :(得分：0)
问题是因为在.view单击处理程序中，您正在使用$('.view')引用所有现有按钮。要解决此问题，请使用this关键字引用被单击的元素：
$("body").on("click", ".view", function() {
var $button = $(this);
$button.parent().siblings(".card-body").slideToggle(2000, function() {
$button.text($(this).is(':hidden') ? 'Show' : 'Hide').toggleClass("fa-eye-slash");
});
});
答案 3 :(得分：0)
首先将button元素存储到变量中，然后在toggle的回调中使用该变量。
$(document).ready(function() {
$("body").on("click", ".view", function() {
var btn = $(this);
$(this).parent().siblings(".card-body").slideToggle(2000, function() {
if ($(this).css("display") == "none") {
$(btn).text(' Show');
} else {
$(btn).text(' Hide');
}
$(btn).toggleClass("fa-eye-slash");
});
});
var i = 1
$("body").on("click", "input.btn-primary", function() {
var x = $("textarea").val();
var title = $("#title").val();
var article = $('<div class="card" id="article-' + i + '"><div class="card-header"> <div class="card-text text-center"><h5> ' + title + ' </h5></div></div><div class="card-body"><div class="card-text text-justify"><p>' + x + '</p> </div> </div> <div class="card-footer text-right"> <button class="btn btn-primary view fas fa-eye"> Hide</button> <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button> </div> </div>');
$(".card-columns").append(article);
i++;
});
$("body").on("click", ".btn-danger", function() {
$(this).parents(".card").remove();
});
$('input[value="Add Article"]').attr('disabled', true);
$('textarea').on('keyup', function() {
var x = $("textarea").val();
var title = $("#title").val();
if (x != '' && title != '') {
$('input[value="Add Article"]').attr('disabled', false);
} else {
$('input[value="Add Article"]').attr('disabled', true);
}
});
});.user-name {
background-color: #d4d4d4;
line-height: 150px;
}
.comment-form {
margin: auto;
width: 70%
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
<header>
<div class=" user-name alert text-center mt-3 border-primary">
User Name /Blog
</div>
</header>
<section class=" row comment-form">
<div class="card bg-light col-12 p-0 ">
<div class="card-header bg-primary text-white text-center">
Add A New Comment
</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="title" class="col-form-label col-sm-2"> Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Write Your Title" id="title">
</div>
</div>
<div class="form-group row">
<label for="comment" class="col-form-label col-sm-2"> Content</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" placeholder="Write Your Content" id="comment"></textarea>
</div>
</div>
<input class="btn btn-primary float-right" value="Add Article">
</form>
</div>
</div>
</section>
<section class="mt-3">
<div class="col-12">
<div class="card-columns">
<div class="card" id="article-1">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
<div class="card" id="article-2">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
<div class="card" id="article-3">
<div class="card-header">
<div class="card-text text-center">
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
</div>
</div>
<div class="card-body">
<div class="card-text text-justify">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="card-footer text-right">
<button class="btn btn-primary view fas fa-eye"> Hide</button>
<button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>