I have a navigational menu now how can i add a selected class after click to any of my spans and remove selected class from previous span using Jquery.
<div class="large-12 columns TSCSlot">
<div class="large-10 columns DayRow">
<div class="large-12 columns left DaySelected">
<span class="Selected"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
</div>
$('div.large-12.columns.left.DaySelected > span').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$(this).closest('span').find('.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
span.Selected {
background-color: #5e9e37 !important;
color: white !Important;
}
Can anyone point me to what I'm doing wrong?
The target of your click is the span, so closest('span') will find itself, so your following find('.selected') will not find the "selected" element:
Try this instead: http://jsfiddle.net/TrueBlueAussie/6pg5as4n/
$(this).closest('.DaySelected').find('.selected').removeClass('selected');
$(this).addClass('selected');
Html:
<div class="large-12 columns TSCSlot">
<div class="large-10 columns DayRow">
<div class="large-12 columns left DaySelected">
<span class="selected"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</div>
</div>
</div>
Notes:
Using closest with .DaySelected will ensure you do not modify other controls on the page. Your could also just use parent() e.g. $(this).parent().find('.selected').removeClass('selected')
The second line then just adds the selected class to the clicked span.
You have an uppercase S on selected in the html. Have changed that to lowercase s to match the code.
You do not appear to need to prevent propagation and spans have no default operation to prevent. e.g. http://jsfiddle.net/TrueBlueAussie/6pg5as4n/1/
Instead of e.preventDefault() and e.stopPropagation you can simply return false to do both. e.g. http://jsfiddle.net/TrueBlueAussie/6pg5as4n/2/
As You telling in post. You are clicking the current span You can add selected class ,remaining selected class are removed
$('div.large-12.columns.left.DaySelected > span').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$('.Selected').removeClass('Selected');
$(this).addClass('Selected');
});
NOTE :in css Selected not selected class
DEMO
Some small improvements:
<span class="Selected"</span> should be <span class="selected"></span>
(small beginning character for classes and > added)
$('div.large-12.columns.left.DaySelected > span').click(function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
$(this).parent().find('.selected').removeClass('selected'); //removes all selected classes in this div
$(this).addClass('selected');
});
Your click is binded on the <span>. So if you use jQuery(this) it is actually the span you want to change. So you dont need .parent() .find() or anything else to add the class to it.
I think your DOM select is wrong.
$('div.large-12.columns.left.DaySelected > span')
should be
$('div.large-12.columns .left.DaySelected > span')
Related
Specifically, I'll have a bunch of span classes without names and I only want the script to delete the spans that contain the text "Test" in them after the page has loaded.
<span class=""></span>
<span class=""></span>
<span class="">Test</span> //<- Delete this one!
<span class=""></span>
Using jQuery, only need 1 line.
$('span:contains("Test")').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="">1</span>
<span class="">2</span>
<span class="">Test</span>
<span class="">3</span>
Try this it will help you.
Javascript
const spans = document.querySelectorAll('span') // fetch all the span elements
spans.forEach((node) => {
if(node.innerHTML === 'Test') {
node.remove() // at your condition remove the element from DOM
}
});
jQuery
$('span:contains("Test")').remove()
Working demo
Use Jquery .each() loop on the target element list... Then use .remove()
on the this instance of the looped element if conditional is true.
let $span = $('span');
$span.each(function() {
if($(this).text() === "Test"){
$(this).remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="">Other text</span>
<span class="">Other text</span>
<span class="">Test</span> <!-- Delete this one! -->
<span class="">Other text</span>
I have a link that when clicked, will reveal a div below it. The div is hidden by default.
Inside of that div, there is an identical nested setup - a link that when clicked, will reveal a div beneath it.
The issue is, when the nested div is hidden by default, my jquery won't register clicks on the nested link. If the nested div is not hidden by default, everything works.
Another wrinkle of this - there will be multiple instances of the blocks below. So there could be 4 "outer-data" divs, each with their own "inner-data" divs. When the link is clicked, it should only hide the correspending "outer-data" class not all "outer-data" classes. This aspect works properly currently.
How can I get around this? Here is my code -
$('.outer-toggler').click(function() {
$(this).parent().find('.outer-data').toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).parent().find('.inner-data').toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I found this issue which looks similar, but in my situation the link is hidden by default whereas his dropdown boxes are not, so his changes were still triggering the event at least - Nested jQuery toggle statements
Use $(this).next().toggle(); as the toggle target is the next sibling
$('.outer-toggler').click(function() {
$(this).next().toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).next().toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I'm extremely new to jquery and I've been struggling to create this action. Any help in this matter will be greatly appreciated.
I need a way in jquery that allows a user to click a span and toggle (i.e .toggle()) another div that contains the same text as the span being clicked, without having to repeat the same function for each individual span.
My example:
<ul>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">art</div>
<span class="label studio-art">studio art</span>
<span class="label ceramics">ceramics</span>
</div>
</div>
</div>
</li>
<li class="sub">
<div class="filter-row">
<div class="row-section">
<div class="row-heading">studio art</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
<div class="row-section">
<div class="row-heading">ceramics</div>
<span class="label">Option 1</span>
<span class="label">Option 2</span>
</div>
</div>
</li>
</ul>
If a user were to click the span that contains "studio art", then I want the div that contains "studio art" to ".toggle()". I do know that I could give a unique class such as ".studio-art" to the span and div that i want to connect together, such as:
$(document).ready(function(){
$("span.label.studio-art").click(function(){
$(".row-section.studio-art").toggle();
});
$("span.label.ceramics").click(function(){
$(".row-section.ceramics").toggle();
});
});
Jsfiddle example: http://jsfiddle.net/KCRUSHER/6qLX7/
But I want to avoid doing what I have above since I may have hundreds of spans or instances like this.
So basically I'm hoping for help to create a solution that only needs the string in a span to match the string in my "row-heading" div. So that when a span is clicked the row-section div will toggle.
Thank you for any help in advance.
You can find all other div elements with the same text by using jQuery's filter method and toggle them. You'll have to pick your class names more sensibly to make sense and easier to understand.
$(document).ready(function(){
$(".row-section span").click(function(){
var clickedText = $(this).text();
$(".row-section").filter(function(){
return $(this).find("div").text() === clickedText;
}).toggle();
});
});
Updated fiddle: http://jsfiddle.net/6qLX7/2/
.filter documentation: http://api.jquery.com/filter/
I didn't test this, but it should work.
$(document).ready(function(){
$("span.label").click(function(){
var checkText = $(this).html();
$( ".row-section:contains('"+checkText+"')" ).each(function(index,element){
// This checks for exact match. If you want any "containing" match, remove the if-clause
if($(element).html() == checkText) {
$(element).toggle();
}
});
});
});
Let me know if this helps. P.S.! This function IS case-sensitive (see http://api.jquery.com/contains-selector/ for more details.)
I've got a function that, when you click in a textarea, it will slide down a button.
However, I have multiple textareas on the page with the same class and the problem is that if you click on any of the textareas, all of them will slide down the button.
How can I make it so that it only slides down on the textarea element that you click on, and not the others?
Here's a quick JSFiddle I made: http://jsfiddle.net/MgcDU/6100/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
JavaScript:
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
Have to find the elements relative to the element that was clicked.
$(this) is the element that was clicked, and siblings() finds elements that are siblings.
http://jsfiddle.net/P9nMq/
$("textarea").click(function(){
$(this).siblings('.btn-toggle').slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(this).find('.btn-toggle').slideUp();
}
});
How about instead of relying on a class lookup, use the event target:
$("textarea").click(function(evtTarget){
$(evtTarget.target).parent().find($(".btn-toggle")).slideDown();
});
http://jsfiddle.net/paulprogrammer/MgcDU/6103/
The following snippet selects all the buttons:
$(".btn-toggle").slideUp();
You should replace it with this:
$(this).siblings(".btn-toggle").slideUp();
Update
I would rewrite your script with these lines :
$(".well").('focus blur', "textarea", function(e){
$(this)
.siblings(".btn-toggle")
.stop(true, true)
.slideToggle();
});
The advantage is that you delegate the events on the same parent of the two targeted elements and that you do not rely on any click event handlers.
I have the following HTML code
<div id="id0_0" class="clearfix" style="margin-left:40px">
<div id="id0_1" class="choice">
<span id="spanradio_1" class="radio"> </span>
<span id="spanlabel_1" class="label"><label id="label_1">Indoor</label></span>
</div>
<div id="id0_2" class="choice">
<span id="spanradio_2" class="radio"> </span>
<span id="spanlabel_2" class="label"><label id="label_2">Outdoor</label></span>
</div>
</div>
with the following jQuery:
jQuery('.choice').click( function(e) {
alert('clicked!! ' + e.target.id);
var src_ele = $(e.target);
e.stopPropagation();
return false;
});
However, my click is triggering on the spanradio's & label's and not the div's. Any reason what is causing this?
Thanks!
Basically:
this is the element you bound the event to (i.e. one of the elements in the set that you called .on on)
e.target is the deepest element you clicked on
So you want this.id.
e.target is the element that the user actually clicked on.
If the user clicked on a nested element, e.target will be that element.
because the label is the ONLY content in a ".choice"-element and therefore is on the TOP --> it's actually the element, you clicked on...
check out event.relatedTarget if this is the right one for you.