jquery affecting all the html elements with same class - javascript

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>

Related

JS DOM changing parent element class

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")
}
})

click button show this button number div JQUERY JAVASCRIPT

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();
})

Using jQuery to add class to containing li when a checkbox inside is clicked

Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>
you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).
Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");
You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");
Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.
As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});

How to toggle specific divs with jquery

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.

Javascript Click Not Presenting

I am attempting to display a lightbox when a button in my HTML is pressed.
Here is my HTML:
<div class="login-signup">
<h1> Need to sign in or register? </h1>
<div class="buttons">
SIGN IN
REGISTER
<div class="clear">
</div>
</div>
</div>
When Sign In is pressed, I want my lightbox to present. I've tried to do this but it doesn't seem to work:
$('.login-signup .buttons').click(function(e) {
$('.sign-in').lightbox_me({
});
});
Any ideas?
Could it be that you don't have any elements in your DOM with class attribute "sign-in" ?
What's the result of this ?
$('.load').click(function(e) {
alert($(".sign-in").length);
});
If it's 0 then that means that you don't have any elements in your DOM with class="sign-in" and your lightbox thing probably can't do anything on an element that doesn't exist.
If you want a specific button to fire, in this case it is your SIGN IN button, then use the assigned class like so:
$('.load').click(function(e) {
$('.sign-in').lightbox_me({
});
});
More information

Categories