This is not homework or test task or whatever. Please give a solution or a hint if you can.
I've got 3 divs with buttons, all the divs are absolutely the same, classes are the same, I can't add ID's attributes or anything else to these divs manually. All buttons are also the same with the same conditions, no IDs etc.
So I need on a click to change the class for ONLY a parent element of a clicked button.
How can I get to that particular parent if all divs and buttons are the same? Thanks
My HTML:
<body>
<div class="off">
<button>Button</button>
</div>
<div class="off">
<button>Button</button>
</div>
<div class="off">
<button>Button</button>
</div>
</body>
JS:
document.addEventListener('click' , e => {
let buttonClicked = e.target.matches('button');
if ( buttonClicked ) {
console.log("Button Clicked")
}
})
Related
i have buttons witch has the same clasess. i want to when user click second button show second div, but buttons and divs have the same classes. here is my code.
html:
<button class="test">1</button>
<button class="test">2</button>
<button class="test">3</button>
<div class="divs">1</div>
<div class="divs">2</div>
<div class="divs">3</div>
The most suitable way would be to use id's but there is definitely an alternative way.
$('.test').click(function() {
let btnIndex = $(this).index();
$('.divs').hide();
$('.divs').eq(btnIndex).show();
})
for last few days I'm working on a project, now in this project, I have a sidebar with buttons like this
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
Also, I have some javascript for mouseenter event code like this
$(function).ready(function(){
$('.btn').mouseenter(function(){
$('.btn').css('color', 'red');
});
});
Now the problem is this javascript code is changing all the elements with the same class. I don't want it. I want to change only one button.
For example, if hover on the first button, the javascript code should change the color of the first button only, not other buttons
For some reason, i can not use CSS for this case
So can anyone help me to solve this problem
You need to reference the element specifically with $(this) otherwise all elements with class ".btn" will change:
$('.btn').mouseenter(function () {
$(this).css('color', 'red');
});
If you need to specify which element with the same class name, you can use .eq(). $("div.btn") would mean all <div> elements with the class btn. However, if you do $("div.btn").eq(0), it would mean the first <div> element with the class btn. Similarly, .eq(1) for the second element and so on.
It should be like this.
$(function).ready(function(){ $('.btn').mouseenter(function(){ $(this).css('color', 'red'); }); });
$(document).ready(function(){
$(".btn").mouseover(function(){
$(this).css('color','red')
});
$(".btn").mouseleave(function(){
$(this).css('color','#000000')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
I am trying to do the show/hide function with some containers and text.
When i click on a certain container I want a paragraph to hide. At the moment I am trying to work out when I click the "left" container, the paragraph "barbertext" to disappear.
<p class="hairtext" style="color:red">We are Thairapy, an independent hair <br> and beauty Salon located in the heart<br> of Exeter. At Thairapy, we care about<br> our clients and our main aim is to go<br> that extra mile and look after every <br> one of our happy customers.</p>
<p class="beautytext" style="color:red">Our beautician, Shail Dutt has over<br> 10 years of experience within the beauty<br> industry. Shail is a very dedicated and<br> passionate person, she strives to make<br> her clients feel loved and special. </p>
<p class="barbertext" style="color:red">A decent Mens haircut needn't cost the<br>Earth. We offer top quality Men's haircuts<br> from £7. </p>
<div class="container" id= "left" >
<h1 style="color:white"><a>HAIR</a></h1>
</div>
<div class= "container" id= "center">
<h1 style="color:white"><a>BEAUTY<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>BARBERS</a></h1>
</div>
</div>
The Javascript that I am working with is this:
<script>
$(document).ready(function(){
$("#hairtext").click(function(){
$("barbertext").hide();
});
$("#hairtext").click(function(){
$("barbertext").show();
});
});
</script>
If anyone could help I would be most appreciated.
You bind both handlers to the same element, so you hide and show each time you click.
Try toggle() so that it alternates between hide/show
$(document).ready(function(){
$(".hairtext").click(function(){
$(".barbertext").toggle();
});
});
(needed to add . to the barbertext selector, and . for the hairtext. # is used for ids)
I have made the following fiddle that should do what you need http://jsfiddle.net/Lyd9hgh2/
$(document).ready(function(){
var hidden= false;
$("#left").click(function(){
if(hidden){
$(".barbertext").show();
hidden = false;
}else
{
$(".barbertext").hide();
hidden = true;
}
});
});
You did wrong with your selector:
$(".barbertext")
I am not sure about what you want, but it seems as you want when the user click on the container, a associated div is showed/ hide.
I created a fiddle for that:
http://jsfiddle.net/BenoitNgo/0yL02nop/6/
Corrected the existing code: (as per your need - when I click the "left" container, the paragraph "barbertext" to disappear)
<script>
$(document).ready(function(){
$("#left").click(function(){
$(".barbertext").hide();
});
$("#left").click(function(){
$(".barbertext").show();
});
});
</script>
Improvments:
You can use Ids for containers and paragraphs both for performance
You can use jquery toggle function if you want a show/hide behavior on container click
Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>
You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.
I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});
<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.
So... On click, I want the button with a class "clicker" to get, through JQuery, the element with the class "popup-box". The structure I have below appears several times throughout the page, and that's my problem... I want the "clicker" to target only the "popup-box" that comes after him.
My structure is as follows (this is repeated several times):
<div class="item-papers">
<div class="img-wrap">
<div class="img-innerwrap">
</div>
</div>
<div class="floater">
<span></span>
<div class="item-papers-content">
<span></span>
<span></span>
<div>
<span></span>
<div class="popup-box"></div>
</div>
</div>
</div>
</div>
I've messed around with .sibblings(), .parents(), .find(), but I can't, for my life, figure out how to reach it.
Any help is really appreciated.
Thank you
Well, their closest common parent is the .item-papers element.
So go upwards from the clicked element with .closest('.item-papers') and then downwards with .find('.popup-box') to get the popup element..
$('.clicker').on('click', function(e){
e.preventDefault();
var self = $(this),
popup = self.closest('.item-papers').find('.popup-box');
// do what you want with the popup element here..
});