Using jQuery html() method in several clicks - javascript

I am working on this demo. I am trying to find out why the HTML disappears after using the second button.
As long as you only click on btn #from-content-1 or only on #from-content-2 every thing is fine but if you click on #from-content-1 and then on #from-content-2 and back to the #from-content-1 again, the content disappears!
Here is the code which I have:
<div class="row">
<div class="container">
<div id="dest">Here is the Destination</div>
</div>
</div>
<div class="sr-only">
<div id="content-1">This Is From Content 1</div>
<div id="content-2">This Is From Content 2</div>
</div>
<button class="btn btn-default" id="from-content-1">From Content 1</button>
<button class="btn btn-default" id="from-content-2">From Content 2</button>
and js script is
<script>
$("#from-content-1").on("click",function(){
$("#dest").html($('#content-1'));
});
$("#from-content-2").on("click",function(){
$("#dest").html($('#content-2'));
});
</script>
How can I fix this?

You move the nodes! Do that instead:
<script>
$("#from-content-1").on("click",function(){
$("#dest").html($('#content-1').html());
});
$("#from-content-2").on("click",function(){
$("#dest").html($('#content-2').html());
});
</script>

$("#dest").html($('#content-1')); should be $("#dest").html($('#content-1').html()); and $("#dest").html($('#content-2')); should be $("#dest").html($('#content-2').html());
$("#from-content-1").on("click",function(){
$("#dest").html($('#content-1').html());
});
$("#from-content-2").on("click",function(){
$("#dest").html($('#content-2').html());
});

Related

How can I loop for multiple classes in jQuery? [duplicate]

This question already has answers here:
jQuery same click event for multiple elements
(10 answers)
Closed 2 years ago.
I want to make a loop instead of adding JavaScript for each element to show the div on first click and hide the div on second click.
Only first div will be shown on clicking first div and second div will be shown on clicking on second div, I don't want to hide any div when clicking on other elements.
I want to show div on click and hide it on second click.
$(".d01").click(function() {
$(".desc1").toggle();
});
$(".d02").click(function() {
$(".desc2").toggle();
});
$(".d03").click(function() {
$(".desc3").toggle();
});
$(".four").click(function() {
$(".d04").toggle();
});
$(".d05").click(function() {
$(".desc5").toggle();
});
$(".d06").click(function() {
$(".desc6").toggle();
});
$(".d07").click(function() {
$(".desc7").toggle();
});
$(".d08").click(function() {
$(".desc8").toggle();
});
$(".d09").click(function() {
$(".desc9").toggle();
});
$(".d010").click(function() {
$(".desc10").toggle();
});
$(".d011").click(function() {
$(".desc11").toggle();
});
$(".d012").click(function() {
$(".desc12").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="d01 topic1">Safety</button>
<button type="button" class="d02 topic2">Environment</button>
<button type="button" class="d03 topic3">Climate change</button>
<button type="button" class="d04 topic4">Sustainability</button>
<button type="button" class="d05 topic5">Business strategy</button>
<button type="button" class="d06 topic6">Performance data</button>
<button type="button" class="d07 topic7">Working for You</button>
<button type="button" class="d08 topic8">Working together</button>
<button type="button" class="d09 topic9">Social performance</button>
<button type="button" class="d010 topic10">Human rights</button>
<button type="button" class="d011 topic11">Special reports</button>
<button type="button" class="d012 topic12">Key topics</button>
<div class="desc desc1">Safety</div>
<div class="desc desc2">Environment</div>
<div class="desc desc3">Climate change</div>
<div class="desc desc4">Sustainability</div>
<div class="desc desc5">Business strategy</div>
<div class="desc desc6">Performance data</div>
<div class="desc desc7">Working for You</div>
<div class="desc desc8">Working together</div>
<div class="desc desc9">Social performance</div>
<div class="desc desc10">Human rights</div>
<div class="desc desc11">Special reports</div>
<div class="desc desc12">Key topics</div>
you can use multiple selectors instead of writing one by one. for example
$('.one, .two, .three').click(function(event){
//you can use event.target to know which element clicked in case you need
console.log('clicked');
});
Since you asked for a common method, this might work
<button type="button" class="d01 topic1 btn" data-target="desc1">Safety</button>
<!-- added a common class 'btn' and data attribute 'target', the target will be your target class name -->
<button type="button" class="d02 topic2 btn" data-target="desc2">Environment</button>
$(function(){
$('.btn').click(function(event){
var tgtClass = $(event.target).data("target");
$('.'+tgtClass).toggle();
});
});

While clicking one of the three buttons cannot disable the other two jQuery

I'm developing a test. I want to disable two of the three buttons when one of them is clicked and to slideDown() a comment under the buttons when one of the options is chosen. I manage to make comments slide down but cannot disable the other comments when the other buttons are pushed. I'm using jQuery. I have already read many possible solutions but they don't seem to work in my case.
Here's a piece of my code:
<div class="btns">
<button class="btn" id="q1b1" value=0>A</button>
<button class="btn" id="q1b2" value=1>B</button>
<button class="btn" id="q1b3" value=0>C</button>
</div>
<div class="content">
<div class="com" id="q1com1">
<p>
comment1
</p>
</div>
<div class="com" id="q1com2">
<p>
comment2
</p>
</div>
<div class="com" id="q1com3">
<p>
comment3
</p>
</div>
<script>
$(document).ready(function(){
if($('#q1b1').click(function(){
$('#q1com1').slideDown(500);
$('#q1b2', '#q1b3').prop('disabled', true);
}));
else if($('#q1b2').click(function(){
$('#q1com2').slideDown(500);
$('#q1b1', '#q1b3').prop('disabled', true);
}));
else if($('#q1b3').click(function(){
$('#q1com3').slideDown(500);
$('#q1b1', '#q1b2').prop('disabled', true);
}));
});
</script>
</div>
Don't put click event handlers in an if condition. You need to assign each button it's own click handler on load and then run the code when the event happens.
To make this as simple as possible you can assign the same event handler to all the buttons then relate the button to the appropriate .com div by its index. Try this:
$(document).ready(function() {
var $comments = $('.content .com');
var $btns = $('.btn').click(function() {
$btns.not(this).prop('disabled', true);
var index = $(this).index();
$comments.eq(index).slideDown(500);
});
});
.com { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns">
<button class="btn">A</button>
<button class="btn">B</button>
<button class="btn">C</button>
</div>
<div class="content">
<div class="com">
<p>comment1</p>
</div>
<div class="com">
<p>comment2</p>
</div>
<div class="com">
<p>comment3</p>
</div>
</div>
Note that this approach removes the need for id attributes and is therefore infinitely extensible with no maintenance required for the JS logic.
I don't know where you got this structure, but it makes no sense:
if($('#q1b1').click(function(){
//...
}))
A click handler isn't a conditional statement. It doesn't return a boolean value. Any and every example you'll find on using click handlers in jQuery would just assign the handler:
$('#q1b1').click(function(){
//...
});
This structure assigns the function you give it as the "handler" for when that element is clicked. Which means at any point after this line of code executes, if a user clicks the #q1b1 element then this function will execute.
you need to bind click event directly inside document.ready and not inside if/else block.
User comma (,) in single string for multiple jquery selector instead of multiple string separated by comma.
See below code
$(document).ready(function(){
$('#q1b1').click(function(){
$('#q1com1').slideDown(500);
$('#q1b2,#q1b3').prop('disabled', true);
});
$('#q1b2').click(function(){
$('#q1com2').slideDown(500);
$('#q1b1,#q1b3').prop('disabled', true);
});
$('#q1b3').click(function(){
$('#q1com3').slideDown(500);
$('#q1b1,#q1b2').prop('disabled', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btns">
<button class="btn" id="q1b1" value=0>A</button>
<button class="btn" id="q1b2" value=1>B</button>
<button class="btn" id="q1b3" value=0>C</button>
</div>
<div class="content">
<div class="com" id="q1com1">
<p>
comment1
</p>
</div>
<div class="com" id="q1com2">
<p>
comment2
</p>
</div>
<div class="com" id="q1com3">
<p>
comment3
</p>
</div>
</div>
$(document).ready(function(){
$('#q1b1').click(function(){
$('#q1com1').slideDown(500);
$('.btn').attr('disabled', true);
$(this).attr('disabled', false);
})
$('#q1b2').click(function(){
$('#q1com2').slideDown(500);
$('.btn').attr('disabled', true);
$(this).attr('disabled', false);
})
$('#q1b3').click(function(){
$('#q1com3').slideDown(500);
$('.btn').attr('disabled', true);
$(this).attr('disabled', false);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btns">
<button class="btn" id="q1b1" value=0>A</button>
<button class="btn" id="q1b2" value=1>B</button>
<button class="btn" id="q1b3" value=0>C</button>
</div>
<div class="content">
<div class="com" id="q1com1">
<p>
comment1
</p>
</div>
<div class="com" id="q1com2">
<p>
comment2
</p>
</div>
<div class="com" id="q1com3">
<p>
comment3
</p>
</div>
</div>

JavaScript .closest returning null

I have the following simple layout which I am unable to change. I am trying to use JavaScript to get the extra element which is closest to the button that was pressed
With help from another question I was able to get the preventDefault part working but now I am struggling with closest
<div class="buttons">
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">64736</div>
</div>
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">5446</div>
</div>
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">78667</div>
</div>
</div>
document.querySelector('.myButton').addEventListener('click', myFunction);
function myFunction() {
event.preventDefault();
close = this.closest(".extra");
console.log(close)
}
But this is giving me null when I press the button, where am I going wrong?
A combination of closest and querySelector can be used:
document.querySelectorAll('.myButton').forEach(function(button) {
button.addEventListener('click', myFunction);
});
function myFunction(evt) {
evt.preventDefault();
var closest = evt.currentTarget.closest(".button").querySelector('.extra');
console.log(closest)
}
<div class="buttons">
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">64736</div>
</div>
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">5446</div>
</div>
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">78667</div>
</div>
</div>
More info:
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
.closest traverses up the dom and does not look at sibling or child elements. In the answer by #MaartenDev he is using .closest to step up one level and target the buttons parent div. He then chains queryselector to step back down into the children and select using the .extra class.
Another solution would be to use .nextElementSibling so you do not have to step up and back down. This would only work if your html elements were direct siblings and the item you were trying to target followed the element you were calling nextElementSibling on.
Here is an example of this.
document.querySelectorAll('.myButton').forEach(function(button){
button.addEventListener('click',myFunction);
})
function myFunction() {
event.preventDefault();
var closest = this.nextElementSibling;
console.log(closest);
}
<div class="buttons">
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">64736</div>
</div>
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">5446</div>
</div>
<div class="button">
<button class="myButton">Click Me</button>
<div class="extra">78667</div>
</div>
</div>

jQuery issue with replacing Font Awesome 5 icon on click?

I am trying to change a play button to be a pause button using Font Awesome 5. I don't understand why it seems to just not toggle on click. It recognizes the clicks (I tried with an alert, so it recognizes when I press the button itself) but it will just not find the element inside and change it.
This is my code:
$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
The main issue with your code is that you are using Font Awesome 5 that changes the i element to svg so your code won't work.
You have two solution:
The easiest one is to use the CSS version of Font Awesome 5 and you will be able to keep your code as it is:
$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
The other solution is to change your code in order to handle the SVG. So you may change the data-icon attribute of the generated svg with the needed icon:
$(".startButton").on('click',function() {
$(this).find('svg').attr("data-icon",'pause-circle');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>

Hiding/Showing divs on click

I have created a script that when a button is clicked it displays all of the content beneath it and hides the other buttons content. The only problem I'm having is that I want to refactor the script so it only works if you hit the button, instead of the entire div the button sits in as it's causing some confusion. What would be the best way about this?
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
jQuery:
(function($) {
$(".signup-button").on('click', function() {
$(".signup-button").not(this).find(".signup-form").hide();
$(this).find(".signup-form").toggle("slow");
});
})(jQuery);
JSFiddle: https://jsfiddle.net/v6bmphct/3/
One option would be to attach the event listener directly to the descendant button element. In doing so, the click event isn't triggered when clicking on the other content. You would also have to change instances of $(this) to $(this).parent() or $(this).closest('.signup-button').
Updated Example
$(".signup-button .btn").on('click', function(e) {
$(this).parent().find(".signup-form").toggle("slow");
$(".signup-button").not($(this).parent()).find(".signup-form").hide();
});
Alternatively, since event.target is a reference to the clicked element, you could also just check to see if event.target is the button element by using the .is() method:
Updated Example
$(".signup-button").on('click', function(e) {
if ($(e.target).is('.btn')) {
$(this).find(".signup-form").toggle("slow");
$(".signup-button").not(this).find(".signup-form").hide();
}
});
Check this out:
(function($) {
$(".signup-button").find('button').on('click', function() {
$(this).siblings(".signup-form").toggle("slow");
$(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
});
})(jQuery);

Categories