This function is set up so it simply finds the -a's- within the class of menu-option-set, and says, upon click, add the class "selected" and remove the class "selected" from all others within that list.
What I want to do is simply have it so if you click the item that already has the class of "selected" then it removes the class of "selected". I know it shouldn't be "return false;" I just have that as a placeholder because I can't figure out the proper coding.
Thanks guys! :)
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// Remove Class if already selected --> this is the part that I need help with
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
$('.menu-option-set a').click(function()
{
// if clicked item is selected then deselect it
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
// otherwise deselect all and select just this one
else
{
$('.menu-option-set a').removeClass('selected');
$(this).addClass('selected');
}
});
You should just be able to use $().removeClass('selected') i.e.
if ( $this.hasClass('selected') ) {
$this.removeClass('selected');
}
However, you are also adding the class again later so this should not really be necessary.
You could inline this by selecting all the .selected elements, removing this and removing the class.
$this
.parents('.menu-option-set')
.find('.selected')
.not(this)
.removeClass('selected');
$(this).addClass('selected');
Alternatively, use the toggleClass() method as follows:
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').not(this).removeClass('selected');
$this.toggleClass('selected');
});
EDIT: Added the .not(this) to exclude the clicked <li> from having the class removed before it should.
If you want to be concise:
$('.menu-option-set a').click(function() {
$(this).toggleClass('selected').siblings().removeClass('selected');
});
Related
adding active class to parent list when link is clicked/active , am trying to inject that using JavaScript as follow:
$(document).ready(
function()
{
//injecting active status to the navigation bar lists
var element = document.getElementById("navbar-ul");
var links = element.getElementsByTagName("a");
for(var i = 0; i < links.length ; i++) {
links[i].onclick(function () {
links[i].parent().addClass('active');
});
}
}
);
but am getting the following error:
TypeError: links[i].onclick is not a function
how I supposed to achieve that?
A more verbose JQuery way to approach this
$('#navbar-ul a').each(function() {
$(this).on('click', function() {
$(this).parent().addClass('active');
});
});
This is very simply with jQuery:
$("#navbar-ul a").click(function(){
$(this).parent().addClass("active");
});
EXAMPLE 1
I'm guessing you're trying to add an active state to the link thats being clicked on and remove the others? If so you can use .siblings() to find the other links and remove their class:
$("#navbar-ul a").click(function(){
$(this).closest("li").addClass("active").siblings("li").removeClass("active");
});
EXAMPLE 2
You would be better of with adding a class to the tags who needs an eventListener. (with jquery)
$(document).ready(function() {
$("#navbar-ul a").on("click", function() {
var active = document.querySelector('#navbar-ul .active');
if(active){
$("#navbar-ul a").removeClass('active');
}
$(this).addClass("active");
});
);
I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});
Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.
You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO
Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});
one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.
You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();
I have a code
var prev;
function addClass( classname, element ) {
prev = cn;
var cn = document.getElementById(element);
$(cn).addClass("selected");
}
The element in the dom look like this:
<div class="arrowgreen">
<ul>
<li>Manager</li>
<li>Planner</li>
<li>Administrator</li>
</ul>
</div>
For 'arrowgreen' I have a styling which changes the li styling on rollover and click.
When an element is clicked on, I want to apply the 'selected' classname to the element.
It does this for a split second and then reverts back.
The css looks like
.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}
Working jsFiddle Demo
In usage of $ in your code, I see that you are using jQuery.
There is no need to set onclick internally.
Let's jQuery handle it for you:
// wait for dom ready
$(function () {
// when user clicks on elements
$('.arrowgreen li a').on('click', function (e) {
// prevent default the behaviour of link
e.preventDefault();
// remove old `selected` classes from elements
$('.arrowgreen li a').removeClass('selected');
// add class `selected` to current element
$(this).addClass('selected');
});
});
Working JSFiddle
There was an error in your HTML, a " that opened a new string after onclick.
var prev;
function addClass(classname, element) {
var cn = document.getElementById(element);
prev = cn; //does nothing useful really
$(cn).addClass("selected");
}
<div class="arrowgreen">
<ul>
<li>Manager
</li>
<li>Planner
</li>
<li>Administrator
</li>
</ul>
</div>
Remember to include jQuery in your page!
There is a way to do this without jQuery anyway:
function addClass(classname, element) {
var cn = document.getElementById(element);
prev = cn; //does nothing useful really
cn.className += " " + classname;
}
Similar way to do it:
(function ($) {
$('.arrowgreen > ul > li > a').on('click', function (e) {
e.preventDefault();
$(this).addClass('selected').siblings().removeClass('selected');
});
}(jQuery));
I have a list item with a radio button input in each, on click of the list item the input is checked. However, if clicked again I want to remove the class and deselect the option. I can't seem to get anything to work however.
function setupToptions() {
if ($('ul.top-options input').length) {
$('ul.top-options li').each(function(){
$(this).removeClass('active');
});
$('ul.top-options li input:checked').each(function(){
$(this).parent('li').addClass('active');
});
};
};
http://jsfiddle.net/BKgdc/4/
What is wrong?
$('ul.top-options li input[type=radio]').click(function() {
if(!$(this).closest('li').hasClass('active')){
$('ul.top-options li').removeClass('active');
$(this).closest('li').addClass('active');
}else
$(this).removeAttr('checked').closest('li').removeClass('active');
});
http://jsfiddle.net/BKgdc/8/
You need to have an event handler :
$('ul.top-options input').change(function(){
if ($('ul.top-options input').length) {
$('ul.top-options li').each(function(){
$(this).removeClass('active');
});
$('ul.top-options li input:checked').each(function(){
$(this).parent('li').addClass('active');
});
}
});
but your code can be simplified as
$('ul.top-options input').change(function(){
$('ul.top-options li').removeClass('active');
$('ul.top-options li input:checked').parent('li').addClass('active');
});
See demonstration
$(document).ready(function() {
$li = $('ul.top-options li');
$li.click(function() {
if(!$(this).hasClass('active')){
$li.removeClass('active')
.filter(this).addClass('active').find('input').prop('checked', true);
} else {
$(this).removeClass('active');
$(this).find('input').prop('checked', false);
}
});
$li.filter(':has(:checked)').click();
});
Your solution would be to use checkboxes instead of radio buttons. No need for any javascript when using checkboxes.
If you want to deselect a radio button you should remove it's selected attribute. :checked only applies on checkboxes.
You would likely need to do this:
$li = $('ul.top-options li');
$li.click(function () {
var self = $(this);
$li.not(self).removeClass('active');
(self.hasClass('active') ? (self.removeClass('active').find('input').prop('checked', false)) : (self.addClass('active').find('input').prop('checked', true)));
});
$li.filter(':has(:checked)').click();
alternate conditional form:
$li = $('ul.top-options li');
$li.click(function () {
var self = $(this);
$li.not(self).removeClass('active');
if (self.hasClass('active')) {
self.removeClass('active').find('input').prop('checked', false);
} else {
self.addClass('active').find('input').prop('checked', true);
}
});
$li.filter(':has(:checked)').click();
a fiddle to show in action: http://jsfiddle.net/ZK4th/
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});