Develop Reference

jquery: how to change span attribute within a list

how can i change the attribute of the <span> within the selected/hovered list item? whenever i hover over one <li> item, only background-color seems to change but not the <span> text itself. i have multiple <li> items similar to the one below. if anything, i would have expected all <span> texts to change when hovering over the <li> element.
$(document).ready(function() {
$('li').hover(function() {
$(this).attr('background-color', '#E07A5F');
$('span').attr('font-size', '.2em');
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>exercises <span>ready</span></li>

It's because background-color would only serve as an attribute but have no affect on your visual styles. You'd either have to toggle a CSS class or inject an inline style via css():
$(this).css('background-color', '#E07A5F');
The same applies for the span(s) you're planning on changing:
$('span').css('font-size', '.2em');
To change the span deriving from the hovered list item, you would do what #Taplar suggested below by using find(), which would target all span descendants:
$(this).find('span').css('font-size', '.2em');

.attr() creates an attribute, so your code would result in this:
<li background-color="#E07A5F" font-size=".2em">
Where what you want is:
<li style="background-color:#E07A5F; font-size=.2em">
So you should be using the .css() method.
$(document).ready(function() {
$('li').hover(function() {
$(this).css('background-color', '#E07A5F');
$('span').css('font-size', '.2em');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>exercises <span>ready</span></li>
</ul>
But, really, you should avoid inline styles as they generally result in duplication of code, don't scale well, and are hard to maintain. Instead, add or remove CSS classes:
$(document).ready(function() {
$('li').hover(function() {
$(this).addClass("bColor");
$('span').addClass("size");
});
})
.bColor { background-color:#E07A5F; }
.size { font-size:.2em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>exercises <span>ready</span></li>
</ul>

If This is Clicked Show This Else Hide This

I have seen other if else examples on here but nothing specifically addressing jquery "if clicked show this else hide this". Here's a simple code example. I would like to know the cleanest way to show the .redStuff when #red is clicked else hide it and show the other classes when the relative id is clicked.
Here is the HTML:
.redStuff, .blueStuff, .greenStuff {
display: none;
}
<ul id="color">
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
</ul>
<div class="redStuff">Red Stuff</div>
<div class="blueStuff">Blue Stuff</div>
<div class="greenStuff">Green Stuff</div>

Using data attributes is easy once you get the idea.
css
.redStuff, .blueStuff, .greenStuff {
display: none;
}
html
<ul id="color">
<li id="red" data-color="red">Red</li>
<li id="blue" data-color="blue">Blue</li>
<li id="green" data-color="green">Green</li>
</ul>
<div class="redStuff" data-content="red">Red Stuff</div>
<div class="blueStuff" data-content="blue">Blue Stuff</div>
<div class="greenStuff" data-content="green">Green Stuff</div>
jquery
// no need for the ids or classes
// we set data attributes for the html
$("li[data-color]").click(function(){
// next line is for second click, to hide the prev div element
$("div[data-content]").hide();
// we are getting the data-color attr value here
// and for readibility we assigned it to a variable called color
var color = $(this).data("color");
// find the div with the same content and show
$("div[data-content='"+color+"']").show();
});
jsfiddle link to play with codes

This should work.
It's not an "If Then Else" statement exactly, but it accomplishes the logical objective.
var $stuff = $(".redStuff, .blueStuff, .greenStuff");
var $colors = $("#color li a");
$colors.on("click", function(){
// get color from parent (li) id
var color = $(this).parent()[0].id;
// turn all stuff off (because we don't know what came last)
$stuff.attr({style: null});
// turn on clicked stuff class
$("." + color + "Stuff").attr({style: "display:block;"});
});
Demo is here.

Numerous ways to approach this depending on complexity of the layout.
If the order is the same relationship between the <li>'s and the <div> you can use index(). Adding a common class would be helpful
<div class="redStuff stuff">Red Stuff</div>
JS
$('#color li').click(function(){
// "this" is the element event occurred on
var index = $(this).index();
// hide all the "stuff" class and show the matching indexed one
$('.stuff').hide().eq(index).show();
});
Or add data- attributes to target specific element so that index order becomes irrelevant
HTML
<li id="red">Red</li>
JS
$('#color a').click(function(){
$('.stuff').hide().filter( $(this).data('target') ).show();
});
Or by using ID to create a selector
$('#color li').click(function(){
$('.stuff').hide().filter('.' + this.id +'Stuff').show();
});

Hide divs by class name instead of id in javascript

I have this JavaScript function that hides div tags from the condition if a checkbox is checked.
following is JavaScript Code:
function showMeA (div) {
var chboxs = document.getElementsByName("enableA");
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(div).style.display = vis;
}
The problem is that function works based on the div's ID. I want to make it work based on the div's class name.
I have tried replacing the getElementById part with getElementsByClassName but, it doesn't work. Can someone propose an exact change that i need to implement in the function in order for it to work based on the div's class?
Thanks in advance.

Instead of using getElementById, you can use getElementsByClassName.
document.getElementsByClassName('className')

You can do this without any Javascript, just with pure CSS and some clever HTML structuring.
.switchme {
display: none;
}
#switch:checked ~ .switchme {
display: block;
}
<input type="checkbox" checked="checked" id="switch" />
<div class="switchme">Switch this div!</div>
<div class="dontswitchme">This div won't be switched.</div>
<ul class="switchme">
<li>This works without any JS.</li>
<li>It is based on CSS 3's :checked pseudo selector.</li>
</ul>
<img class="switchme" src="http://placehold.it/300x200&text=SwitchMe" alt="" />

input:radio click function isn't triggering in IE / Firefox

I have a form with multiple inputs / radio buttons.
I also have a series of Yes & No radio buttons. When the "Yes" radio button is checked, I have some data slide down beneath.
HTML:
<div class="item seperator first clearfix">
<label>test</label>
<div class="radioWrap">
<label class="yes">
<input class="homepageContent" name="homepageContent" type="radio" value="yes" />
</label>
<label class="no">
<input class="homepageContent" name="homepageContent" type="radio" value="no" checked />
</label>
</div>
</div>
<div class="extrasInner">
<div class="item clearfix">
<label for="theContent">Your Content:</label>
<textarea id="theContent" name="theContent"></textarea>
</div>
</div>
<div class="extrasOuter hide clearfix">
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
The jQuery:
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parent().parent().parent().next().slideDown();
$(this).parent().parent().parent().next().next().slideDown();
} else {
$(this).parent().parent().parent().next().slideUp();
$(this).parent().parent().parent().next().next().slideUp();
}
});
Question 1) This works absolutely fine in Google Chrome, but not in Firefox and IE. It doesn't seem to recognise the click function?
Solved: I had a function within one of my files that removes the value from input fields on focus and this was stripping the value of the radio buttons as well in IE / Firefox (but not chrome!).
Question 2) Is my DOM traversing for the slideUp / slideDown an acceptable way of achieving what I'm trying to do? Are there any disadvantages to how I'm doing it and can it be improved?

Answer to #1
As Anthony Grist pointed out, there doesn't seem to be an issue with the click function.
Answer to #2
Your DOM traversal seem a bit unnecessary. In fact, your DOM structure is in need of rearrangement.
Using a checkbox instead of radio buttons. A checkbox only accepts two values: true or false, or in your case, yes or no. It seems more suitable.
Encapsulate your extras inner and extras outer divs inside your item div instead of having it next to the checkbox. This way, you make it easier to traverse within the item.
Also, you should read up on the different types of traverse functions JQuery has:
.parent() / .parents()
.children()
.closest()
.next()
.prev()
.siblings()
.find()
and many more.
Knowing all of these traverse functions, you'll most likely never ever do parent().parent().parent()... again. :)
Here's a JSFiddle example | Code
HTML
<ul>
<li class='item'>
<label>
<input class="homepageContent" name="homepageContent" type="checkbox" value="yes" />
Item 1
</label>
<div class='extras'>
<div class='inner'>
<label>
Your Content:<textarea name="content"></textarea>
</label>
</div>
<div class='outer'>
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
</div>
</li>
</ul>
Javascript
$("input:checkbox").click(function() {
var $this = $(this),
$item = $(this).closest(".item");
if($this.is(':checked')){
$(".extras", $item).slideDown();
}else{
$(".extras", $item).slideUp();
}
});
CSS
.extras{
display: none;
}

Value of the radio button will always be same, no matter it is checked or not. If you want to know the particular radio button is checked or not then use this code. Based on the status of the radio button do your stuff.
var value = $(this).attr('checked')

That is working for me in FF (jsfiddle), although the DOM looks a little convoluted (I'm guessing because it's missing a lot of your other CSS/resources).
I think you can simplify the jQuery selectors a lot. Generally, using simple ID or class selectors will make the your page much more performant (and simpler!)
$('.homepageContent').click(function() {
var value = $(this).val();
if (value == 'yes') {
$('.extrasInner').slideDown();
$('.extrasOuter').slideDown();
} else {
$('.extrasInner').slideUp();
$('.extrasOuter').slideUp();
}
});
Hopefully doing something like this makes it work cross browser better too.

try this way
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
EDIT
​
and also a point
wrap your code inside
$(document).ready(function(){});
like this
$(document).ready(function(){
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
});

Checkboxes + Jquery hide/show

I have a series of a series of rows and checkboxes to filter them:
<ul>
<li><input id="type-A" type="checkbox" checked="checked"> A</li>
<li><input id="type-B" type="checkbox" checked="checked"> B</li>
<li><input id="type-C" type="checkbox" checked="checked"> C</li>
<li><input id="type-D" type="checkbox" checked="checked"> D</li>
<li><input id="type-E" type="checkbox" checked="checked"> E</li>
<li><input id="type-F" type="checkbox" checked="checked"> F</li>
</ul>
<table>
<tr class="A">filler</tr>
<tr class="B">filler</tr>
<tr class="A B">filler</tr>
<tr class="C D">filler</tr>
<tr class="A F">filler</tr>
<tr class="A E F">filler</tr>
<tr class="F">filler</tr>
<tr class="C D E">filler</tr>
<tr class="A B C D E F">filler</tr>
</table>
I'd like to hide/show rows based on what is checked. Currently I'm using (with the help from this previous question: Use "this" to simplify code (simple jQuery) ):
$(function(){
$("input[id^='type-']").change(function() {
$("."+this.id.replace('type-','')).toggle(this.checked);
}).change();
});
Which toggles what is shown every time a box is clicked and works great if each row only has one class. But they don't. How it's set up now, the order of clicking changes the rows that are shown. So I need to create a function that checks which checkboxes are checked and shows the rows that contain any of them. I'm not opposed to adding a button to make this happen.
I'd appreciate any help (and the direction to resources that could help me learn) you guys could give me!

Modify the function to get a selector for all the checked check boxes.
$(function(){
var $checkboxes = $("input[id^='type-']");
$checkboxes.change(function() {
var selector = '';
$checkboxes.filter(':checked').each(function(){ // checked
selector += '.' + this.id.replace('type-','') + ', ';
// builds a selector like '.A, .B, .C, '
});
selector = selector.substring(0, selector.length - 2); // remove trailing ', '
// tr selector
$('table tr').hide() // hide all rows
.filter(selector).show(); // reduce set to matched and show
}).change();
});
EDIT: see jsfiddle

jQuery has created this function for you! It's called .filter(), and it takes either a selector string, a function, a raw DOM element, or a jQuery object. In your case, I'd pass it a selector string. We can make use of jQuery's :has() selector, which takes a selector and returns the matched elements. So, if you wanted to select all rows (li elements) that contain checked checkboxes, you could do it like this:
$("li").filter(":has(input:checked)");
Or, we could eliminate our call to filter() and simply pass the entire selector to $():
$("li:has(input:checked)");
That will return all li elements that contain any checked checkboxes anywhere among it's descendants, not just it's direct children.
And putting it in the context of your .change() handler:
I'm assuming you want to show tr elements that have the same type as the li elements that contain checked checkboxes, and hide any tr elements that don't. So, we'll make use of the .toggle() function, which toggles the visibility of elements:
$(function(){
$("input[id^='type-']").change(function() {
$("."+this.id.replace('type-','')).toggle(this.checked);
// show any tr elements that have the class relating to the type of the inputs that contain checked checkboxes...
$("li:has(input:checked)").each(function() {
$("tr" + "." + this.id.replace(/type-/, "")).toggle();
});
}).change();
});

$("table tr").hide();
$("input[id^='type-']").each(function() {
element = $(this);
$("table tr").each(function() {
if($(this).hasClass(element.id.replace('type-','')) {
if(element.is(":checked") {
element.show();
}
}
});
}).change();