click button show this button number div JQUERY JAVASCRIPT - 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();
})

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

jquery affecting all the html elements with same class

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>

JQuery: remove a toggling class from one div before adding to other

I have 2 button like links, which toggle the class "active" for their respective 'arrowbox' divs. here is the html for that:
<span class="ct"><a class="fa fa-shopping-cart"><sup id="itm_count">31</sup></a></span>
<div class="cart">
hello world
</div>
<span class="ai"><a class="fa fa-plus"></a></span>
<div class="arrow_box">
<a style="margin-top: 5px;" onclick="new_dis()">Add distributor</a>
</div>
both the arrow-box and cart divs have display property set to none, but when I click the buttons 'ct' or 'ai' they appear on screen with following jquery:
$(".ai").click(function () {
$(".arrow_box").toggleClass("active");
$(".cart").RemoveClass("active");
});
$(".ct").click(function () {
$(".cart").toggleClass("active");
$(".arrow_box").RemoveClass("active");
});
the problem here is when one div is active ('cart' or 'arrow_box') and I click on the other button, the previous active div should not display on the screen, but it is.. how do I solve it?
also here is the fiddle to better understand the problem
thanks
your code is correct but there is a little problem you wrote RemoveClass but the actual function is removeClass. here is the example :-
$(".cart").removeClass("active");
$(".arrow_box").removeClass("active");

How can I remove a class from the span nearest span using jQuery?

I have a page that allows visitors to add favorites to a list. It uses repeating rows to show items so generic classes are repeated.
How can I show a single modal window (.closest or .prev?) if they all have the same class?
Here is my fiddle: http://jsfiddle.net/psasj74L/
<span class="jsCrateMaxModal most-wanted-modal-container hide">
<div class="most-wanted-modal">
<div class="most-wanted-content">
One.
<div class="col-xs-12">
<div class="btn-primary btn-block">OK</div>
</div>
</div>
</div>
</span>
<button class="jsShowMaxModal mostWantedOff">Show Modal</button>
jQuery:
$('.jsShowMaxModal').click(function () {
$(".jsCrateMaxModal").closest("span").removeClass("hide");
});
$('.most-wanted-modal-container').click(function () {
$('.jsCrateMaxModal').addClass("hide");
});
You can use .prev() in this case to find the modal preceding the button.
$('.jsShowMaxModal').click(function () {
$(this).prev(".jsCrateMaxModal").closest("span").removeClass("hide");
});
Working example: http://jsfiddle.net/psasj74L/2/
However, this is a little flaky, and I would recommend wrapping the span and button in a div which offers some logical grouping. If this is not possible, an alternative is to use data attributes to specify which modal a button should open.

How to stop a button from toggling within div tag using jQuery?

I have a link which triggers div tag to toggle. The problem is that I don't want my button(which is within the div), to toggle. How do I stop it from toggling?
This is my html code:-
Upload Videos
<div id="uploadVideos" class="menu">
<input name="submit" type="submit" value="Upload" id="btn" />
</div>
This is my jQuery code:-
$(document).ready(
function upload(){$("#uploadVideoLink").click(
function uploadTog(){$("#uploadVideos").toggle();}
);}
);
You need to get it outside the <div> you can't hide an element without all the elements inside of him. It's just the way DOM is.
If you mean that you don't want to hide the button that's not possible i think as long as the button is inside the div becuase toggle() assign display: none; to the div thus hiding everything inside it
One thing you could do is this one (this would toggle all elements inside the div but not the button):
Upload Videos
<div id="uploadVideos" class="menu">
<div>sometext</div>
<input name="submit" type="submit" value="Upload" id="btn" />
<div>sometext</div>
</div>
$(document).ready(
function upload() {
$("#uploadVideoLink").click(
function uploadTog() {
$("#uploadVideos *:not(#btn)").toggle();
});
});
fiddle
http://jsfiddle.net/K5NL4/
If I understand correctly, you will need to move the button outside the div. With a little styling you should be able to get the interface to look right.
Either position the toggled-on DIV on top of the outside button, and place another identical button inside the DIV on top of the original button. Or position the toggled-on DIV adjacent to/just below the button, and just create a border that makes it seem like the button is now 'part' of the toggled DIV.

Categories