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();
});
});
Related
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>
I'm trying to build my first calculator. When adding the eventListener, the function only sometimes enters the if statement. I.e. if I click some number it doesn't log but when I try other numbers and then the first one again it works. I really don't get this behavior.
Here you can have a look (logs to the console) https://jsfiddle.net/ert54b7z/2/
const keys = document.querySelector(".keypad");
keys.addEventListener("click", function(e) {
if (e.target.matches("button")) {
const button = e.target;
const key = button.dataset.key;
console.log(key);
}
});
<div class="keypad">
<div class="clear">
<button data-key="clear" class="button"><p>C</p></button>
<button data-key="all-clear" class="button"><p>AC</p></button>
</div>
<div class="operations">
<button data-key="plus" class="button"><p>+</p></button>
<button data-key="minus" class="button"><p>-</p></button>
// ...
</div>
<div class="numbers">
<button data-key="7" class="button"><p>7</p></button>
<button data-key="8" class="button"><p>8</p></button>
// ...
</div>
<button data-key="equals" class="button equals"><p>=</p></button>
</div>
It's a good intuition to use event delegation. You check for the target of the click event, but since your buttons contain paragraph tags, they become the click target if you click somewhere in the center of the buttons. Remove the <p> tags (they aren't needed anyway), and the keys will be logged on every click.
You're attaching the event listener to the outer div. You need to attach it to the buttons.
$('.keypad').on('click', myFunction);
function myFunction(e) {
// do stuff here
}
<div class="">
<div class="clear">
<button data-key="clear" class="keypad button"><p>C</p></button>
<button data-key="all-clear" class="keypad button"><p>AC</p></button>
</div>
<div class="operations">
<button data-key="plus" class="keypad button"><p>+</p></button>
<button data-key="minus" class="keypad button"><p>-</p></button>
// ...
</div>
<div class="numbers">
<button data-key="7" class="keypad button"><p>7</p></button>
<button data-key="8" class="keypad button"><p>8</p></button>
// ...
</div>
<button data-key="equals" class="keypad button equals"><p>=</p></button>
</div>
<!-- include jquery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
I want to remove <button>.
for example remove second <div> tag <button> when i have to click on second <div> tag <button> like <div class="demo2">
<div class="demo1">
<button id="btn1" class="btn1">Add1</button>
</div>
<div class="demo2">
<button id="btn1" class="btn1">Add1</button>
</div>
<script src="jquery-3.1.1.min.js"></script><script>
$(document).ready(function()
{
alert("aaa");
$("#demo2 .btn1").remove();
});
</script>
I try this Code:
<script>
$(document).ready(function()
{
$("#btn1").remove();
});
</script>
it will remove first <button> but I want to remove second <div>
and <button>
You need .demo2 and not #demo2 since demo2 is a class and
not an id
$(document).ready(function()
{
alert("aaa");
$(".demo2 .btn1").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo1">
<button id="btn1" class="btn1">Add1</button>
</div>
<div class="demo2">
<button id="btn1" class="btn1">Add2</button>
</div>
This can also be a little more complicated cond=sider you don't know which id are repeating, in that case you can use a loop like below
$(document).ready(function()
{
$('.demo1 button').each(function(){
var id = $(this).attr('id');
$('.demo2 button').each(function() {
if($(this).attr('id') === id) {
$(this).remove();
}
})
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo1">
<button id="btn1" class="btn1">Add1</button>
<button id="btn2" class="btn1">Add1</button>
</div>
<div class="demo2">
<button id="btn1" class="btn">Add2</button>
<button id="btn2" class="btn">Add2</button>
<button id="btn3" class="btn">Add2</button>
</div>
Not sure exactly what you want to do, but firstly you can't use an the same id CSS tag twice. If it's just to remove the second button after the alert then just change the id and remove that single button.
$(document).ready(function() {
alert("aaa");
$("#btn2").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo1">
<button id="btn1" class="btn1">Add1</button>
</div>
<div class="demo2">
<button id="btn2" class="btn1">Add1</button>
</div>
This is how you can get the context of the i'th element having the same selector:
getElementAt(selector, i) {
return $(selector + ":eq(" + i + ")");
}
and you can use it like this:
getElementAt("[id=btn1]", 1).remove();
The # id operator returns the first element having the given id, as the browser assumes that a unique identifier can be present maximum once in a document. Therefore your HTML is invalid and you should fix it, but if you do not have time now to do that, you can use [id=btn1] instead of #. You can also use document.querySelectorAll("[id=btn1]")[i] if you like.
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);
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());
});