【发布时间】：2019-01-16 21:13:36
【问题描述】：
我正在开发通过按钮添加帖子的发布系统，添加的帖子有两个按钮，一个用于显示/隐藏内容，另一个用于删除内容.. 我使用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>【问题讨论】：
-
在
.view点击处理程序中将$(".view")更改为$(this) -
我需要更改按钮文本而不是 div 文本
-
.view是按钮.... -
但是（“.view”）如果函数与 div 的可见性相关，如果我将其更改为此它将更改内容文本而不是按钮
-
我看到了你的问题。我在下面为你添加了答案
标签： javascript jquery html css bootstrap-4