Class doesnt toggle outside of the button - javascript

I have a button and when I click to it I want to show another div. So basically when the user click DETAILS button. it should, the class 'show' should be added to order-body and it should show the div.
<div id="1-order__content" class="order__content">
<div class="header">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<button id="waiting-button" type="submit" class="button-status">
DETAILS
</button>
</div>
</div>
</div>
<div class="order-body show"> </div>
Basic css for this:
.orders .order-body {
font-size: 14px;
display: none;
}
.orders .order-body.show {
display: block;
}
And javascript:
$(document).ready(function(){
$("waiting-button").click(function(){
$(this).toggleClass("show");
});
});
I dont know why but it doesnt work as I expected. It does nothing actually. So what do you think I am making wrong?
Thanks

You should be using different selector for the element.
$(document).ready(function(){
$("#waiting-button").click(function(){
$(this).toggleClass("show");
});
});
The "#" symbol before waiting-button meants that you are using element ID to select.

The button has an
id="waiting-button"
So you should add "#" when selecting it with $.
For id you must use "#" and for class must use "."

Related

Add class to previous element

I just want to add class for the button after another class but it's inside of another div. Take a look at this example.
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom"></div>
.add-me{
color:red;
}
In here, I want to add to class button one. But it needs to be applied when bottom class appears.(This is a validation message. So I can't style directly to button one.)
I tried with this way. But it only apply for wrapper div.
$('.bottom').prev('div').first().addClass('add-me');
Here is the fiddle: https://jsfiddle.net/eqhj0vm9/2/
You have to use $('.bottom').prev().find(':first-child').addClass('add-me'); to select the prev element's first child.
$(function() {
$(".activate").click(function(){
$('.bottom').show();
$('.bottom').prev().find(':first-child').addClass('add-me');
});
});
.add-me {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom" style="display:none"> BOTTOM CLASS </div>
<br />
<button class="activate">Activate bottom class</button>

Show content if class exists

I'm trying to show content from a div if the class active exists on a button.
<button type="button" class="tab tab-library">Library</button>
<button type="button" class="tab tab-home active">Home</button>
<button type="button" class="tab tab-settings">Settings</button>
These are the buttons I have, and the toggling of the active class works depending on the button pressed.
However I'm struggling with showing different content when I press any particular button.
<div class="home-container">
<div class="home">
Content
</div>
</div>
Only the container that has the active class should be visible/displayed.
No jQuery please as I'm still trying to learn plain JS.
this is test code, you can use querySelector , if class exit then alert ok or not, for test click the click button then alert will ok
function test() {
if (document.querySelector('.home') !== null) {
alert('ok');
} else {
alert('not');
}
}
<body>
<div class="home-container">
<div class="home">
Content
</div>
<span style="cursor: pointer; background: #0f192a;color: #00BD9B" onclick="test()">Click</span>
</div>
</body>

How to get the ID of a clicked element, when it or its children are clicked?

UPDATED
I think I may have inadvertently made the question confusing. This is an update that is more specific with updated code based on comments and answer I have been given so far. Thank you to everyone that has taken the time to comment and answer.
How can I get the ID of a <div> with the class of .button when I have a click listener for .button. If .button or any of its children are clicked, it should return the ID for that particular div with the class of .button.
This is what I have so far: New JSFiddle
HTML
<div class="row">
<div id="b1" class="button">
<h2>Button 1</h2>
</div>
<div id="b2" class="button">
<h2>Button 2</h2>
</div>
<div id="b3" class="button">
<h2>Button 3</h2>
</div>
</div>
jQuery
var selected = "";
$('.button').on('click', function(e) {
selected = e.target.id;
$('.button').css('backgroundColor', '#becde5');
$('#' + selected).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
This is almost correct but does not propagate, if I click on a <h2> the function does not work. However if I click on the .button div itself it works.
Initial Question
I am trying to create a general function that can identify what child was selected from its parents click listener. The child may have its own children that would all be considered part of the same element so that if any of these children where selected they should also elicit the same response from the click listener.
This is an example of what I have working so far: JSFiddle
HTML consisting of three buttons that all have one child <h2> tag and share the <div class="row"> as their parent.
<div class="row">
<div class="b1 button">
<h2 class="b1">Button 1</h2>
</div>
<div class="b2 button">
<h2 class="b2">Button 2</h2>
</div>
<div class="b3 button">
<h2 class="b3">Button 3</h2>
</div>
</div>
jQuery that listens for a click on <div class="row">. It retrieves the first class name of the clicked element and stores it in a variable. The elicited response in this case is a change of the CSS style background-color though this is arbitrary and would change depending on the use of the function.
var selected = "";
$('.row').on('click', function(e) {
selected = e.target.className.split(" ")[0];
$('.b1, .b2, .b3').css('backgroundColor', '#becde5');
$("." + selected).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
The fact that I am adding a lot of classes to elements purely to identify them on a click seems like it would not scale very well and is generally a bad approach. This method also means that I would always have to put the class name that identifies what element was selected at the beginning of its HTML class attribute. This could potentially clash with other functions using the same method.
Is there a better way to identify what child element was selected from its parents click listener, where a child may have other children that also require the same response from the listener?
EDIT based on the edited question:
I think that what you really want is the id of the element that triggered the event.
But by using e.target you have the target element... which is not necessarily the element that triggered the event.
See in this updated Fiddle.
So simply use $(this) as the selector to retrieve the id... Using .attr("id").
;)
Answer to the initial question:
To determine what can be "selected", I used a "clickable" class.
To avoid using id or class as an identifier to determine what has been clicked,
a data attribute can be usefull.
I used data-id... But you can use whatever you want, like: data-selected or data-target, and assign whatever value to it.
In the below code, I made two exactly identical rows, except their data-id value.
var selected = "";
$('.clickable').on('click', function(e) {
e.stopPropagation(); // To prevent bubbling.
// Reset all bg colors
$('.button').css('backgroundColor', 'initial');
$('.row').css('backgroundColor', 'initial');
// Find exactly what was clicked
if ($(this).hasClass("row")) {
var row = $(this).data("id");
selected = row + " (whole)";
}
if ($(this).hasClass("button")) {
// Find in which row
var row = $(this).closest(".row").data("id");
var btn = $(this).data("id");
selected = btn + " in " + row;
}
// Pale all buttons
$('.button').css('backgroundColor', '#becde5');
// Change bg color of the selected element
$(this).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
.row {
display: table;
width: 100%;
color: white;
border-spacing: 20px;
}
.button {
display: table-cell;
border-radius: 12px;
background-color: #6fa1f2;
text-align: center;
}
#selected {
font-size: 30px;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Selected : <span id="selected">no selection</span></span><br>
<div class="row clickable" data-id="row1">
<div class="button clickable" data-id="btn1">
<h2>Button 1</h2>
</div>
<div class="button clickable" data-id="btn2">
<h2>Button 2</h2>
</div>
<div class="button clickable" data-id="btn3">
<h2>Button 3</h2>
</div>
</div>
<br>
<div class="row clickable" data-id="row2">
<div class="button clickable" data-id="btn1">
<h2>Button 1</h2>
</div>
<div class="button clickable" data-id="btn2">
<h2>Button 2</h2>
</div>
<div class="button clickable" data-id="btn3">
<h2>Button 3</h2>
</div>
</div>
no need to id the subject, since it was the one clicked, i.e. e.target which with jQuery you cant select like $(e.target) without any trouble
then you need .closest('.button') to search up to the parent .button (if any)
$('.row').on('click', function(e) {
$('.row > .button').css('backgroundColor', '#becde5');
$(e.target).closest('.button').css('backgroundColor', '#3b71c6');
console.log($(e.target).html());
});
.button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="button">
<h2>Button 1</h2>
</div>
<div class="button">
<h2>Button 2</h2>
</div>
<div class="button">
<h2>Button 3</h2>
</div>
</div>
If you avoid giving an identifier (classes, IDs, etc) you'd need to do some manual checking for tag type to see what you clicked on (so basically, an identifier as well)
Here's an example, and not very memory efficient method
jsfiddle example
$('.row, .row *').on('click', function(e) {
e.stopPropagation()
$('.button').removeClass('active')
$('.button').css('backgroundColor', '#becde5');
$(this).toggleClass('active')
$('#selected').html(e.target.tagName + ': ' + e.target.className);
});
If you bind a click to div.row and clicked the h2 tag inside the button, and want to manipulate the h2 tag, you could check its tagName- but that less scalable than your OP.

Change class by searching for the closest class

I want to change the class of my closest div after pressing a button. Let me make it more clear by showing some code. I have the following HTML:
<div class="wrapper">
<div class="title">
<div class="aa">-</div>
<div class="ab">-</div>
<div class="ac">-</div>
<div class="navigation">
Test link
</div>
</div>
<div class="content not_active">
<p>
Text
</p>
</div>
</div>
With the following CSS:
.active{
display:block;
}
.not_active{
display:none;
}
Now my goal is to find the closest div that has the class: .not_active and change that class after pressing on the hyperlink with class: navigation.
I tried it with jQuery with the following code:
$(function () {
$('.navigatie a').click(function () {
$(this).parent().parent().find('.not_active').toggleClass('active');
});
});
but with no succes. What I am doing wrong?
JSFIDDLE DEMO
It is because you are using .navigatie class instead of .navigation.
Here the JSFiddle.

How to wrap a selection of twitter bootstrap tabs as one form?

I have a twitter bootstrap tabs componenet.
I want two of the tabs to be part of a form. and the third to not be.
So I thought, I'll just wrap the two tabs in a form.
But it does not work: http://jsfiddle.net/gLrr4/1/
Basically whilst the classes get applied to the right elements, it seems that the form is stopping the respective tabs from changing their visibility.
How can I fix this?
Demo: http://jsfiddle.net/gLrr4/1/
Demo Code:
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" type="text/css"/>
<script src='http://twitter.github.com/bootstrap/js/bootstrap-tab.js'></script>
</head>
<body>
<div class="alert alert-error">Tab 1 and two are wrapped in a form tag!</div>
<div class='row'>
<div class="span12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">#tab1</li>
<li>#tab2</li>
<li>#tab3</li>
</ul>
<div class="tab-content">
<form class="form-vertical">
<div class="tab-pane active" id="tab1">
<div class="alert alert-info">
This is #tab1
</div>
<div class='form-actions'>
<button type='submit' class='btn btn-primary'>Save changes</button>
<button id='cancel' class='btn'>Cancel</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="alert alert-info">
This is #tab2
</div>
<div class='form-actions'>
<button type='submit' class='btn btn-primary'>Save changes</button>
<button id='cancel' class='btn'>Cancel</button>
</div>
</div>
</form>
<div class="tab-pane" id="tab3">
<div class="alert alert-info">
This is #tab3
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>​
Ok,
Found the solution:
With a little bit of Javascript:
$('a[data-toggle="tab"]').on('shown', function (e) {
$(e.target.hash).closest('.tab-content')
.find('> form > .tab-pane.active:not(' + e.target.hash + '),
> .tab-pane.active:not(' + e.target.hash + ')')
.removeClass('active');
});
And a smidge of css:
.tab-content > form > .tab-pane,
.pill-content > form > .pill-pane {
display: none;
}
.tab-content > form > .active,
.pill-content > form > .active {
display: block;
}
We can now nest the tabs in a form,
Of course this only supports form tags, not any child,
I could make it support any element by removing the >'s but the issue is that that would cascade down if we had nested tabs!
Right, bit of a long answer, but bear with me - there are a two issues that need "fixing" to get this to work...
First problem: The first two tabs are displayed at the same time.
Cause: boostrap.css (not minified) lines 4042 and 4047 select only the immediate descendants of the div:
.tab-content > .tab-pane
and
.tab-content > .active
Resolution: Add the following CSS to a separate CSS file:
.tab-content .tab-pane
{
display: none;
}
.tab-content .active
{
display: block;
}
Second problem: The third tab is now always displayed once it's been clicked and another tab is selected.
Cause: This is because when boostrap clears the "active" class from the tabs that haven't been clicked, it only looks for direct descendants of the container. On line 1563 of bootstrap.js:
var $active = container.find('> .active')
Resolution: To fix this, you'll need to change this line to:
var $active = container.find('.active')
However, this is not ideal. So if you don't want to change the bootstrap code you can...
Copy all the bootstrap-tab stuff between lines 1510 and 1624
Rename all occurrences of Tab to NewTab
Change $.fn.tab from line 1602 to $.fn.modifiedTab or similar
Change (data = new Tab(this)) from line 1606 to (data = new NewTab(this))
Use it as per the documentation, but .tab becomes .modifiedTab
Hope that helps :)
I hoping this is was your looking for, here's the link http://jsfiddle.net/gLrr4/2/
It would seem that taking the form tag outside of the div-tab content made it work.

Categories