Asmaa M. Elmohamady
Reputation: 55
how to change one button text when clicking on it not all buttons with same class
i am working on posting system adding posts by button and posts added have two buttons one to show/hide content and another to delete content.. i use jQUERY event slideToggle to hide and show content and change the text on button from show to hide and vice versa but the text off all buttons of posts related to same class changed without clicking on their button.. i need to change button text when clicking on it
$(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>Upvotes: 0
Views: 405
Answers (4)
Shehzad
Reputation: 347
Store the button element into a variable first and then in the callback of toggle, use that variable.
$(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>Upvotes: 0
Rory McCrossan
Reputation: 337560
The issue is because in the .view click handler you are using $('.view') which references all the existing buttons. To fix this use the this keyword to reference the clicked element:
$("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");
});
});
Upvotes: 0
SusheelKumar
Reputation: 11
Another way to do it
$(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>Upvotes: 0
purna
Reputation: 44
change the function on .view click then it will work
$("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");
});
});
Upvotes: 1
Related Questions
- How to change button class on click?
- Javascript: Change button text change after click
- Change bootstrap button class
- Change text of button once clicked using jQuery
- How to change text of buttons created by using <button> tag after clicking on them for multiple buttons?
- Change multiple button text when onclick
- How to change text of buttons after clicking on them for multiple buttons?
- Changing the button text, when a button is clicked w/ Bootstrap
- Change button text when clicked (more/less)
- How to change button text on click using jQuery