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();
});
Related
Need some help with jQuery DOM.
I need to extract the content of the id. I have a list that user can select and it will filter the hotspot of the map. After user select, I want filtertitle to display the new selected filter. I can apply the "id" to the filter title but not sure about the content because the content has Shopping / Dining. Someone please.
HTML
<div class="map-filter">
<div class="filtertitle">All Categories</div>
<ul class="filter-list">
<li class="active" id="All Categories">All Categories</li>
<li id="Shopping">Shopping/Dining</li>
<li id="Hotel">Hotels & Resorts</li>
<li id="Art">Art Galleries</li>
</ul>
</div>
jQuery
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html(id); //This part is where I set the id
});
Use .text(), it gives you the text content of the desired element.
$('.filtertitle').html($(this).text());
In case of html content use .html().
$('.filtertitle').html($(this).html());
If I'm understanding what you're asking correctly then you can try something like this.
$('.filter-list li').click(function(e){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(e.currentTarget).text());
});
JSFiddle - https://jsfiddle.net/583zgs57/
Instead of simple setting id, you can use $(this).text(); to fetch the text content of current element.
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(this).text());
});
as stated in the name, i have a menu with links, and i have a list of sections which i want to show/hide on the click of the menu.
What i want here is to be dynamic in a sense that if i add more menus and sections I don't have to change the code that does it, or to add new tags or names.
I tried doing something myself but I'm probably missing something..
Any assistance would be appriciated
I have a simple example on this jfiddle: https://jsfiddle.net/s07ysx6w/6/
HTML:
<div id="header">
<div id="menuBlock">
<ul id="menu">
<li>Novosti</li>
<li>Program Mladi</li>
<li>Program Odrasli</li>
<li>Program Upisi</li>
<li>Galerija</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<body>
<div id="main">
<div id="novosti" name="sekcija1" class="sekcija">
aaaa
</div>
<div id="programMladi" name="sekcija2" class="sekcija">
aaaa
</div>
<div id="programOdrasli" name="sekcija3" class="sekcija">
aaaa
</div>
<div id="programUpisi" name="sekcija4" class="sekcija">
aaa
</div>
<div id="galerija" name="sekcija5" class="sekcija">
aaaa
</div>
<div id="kontakt" name="sekcija6" class="sekcija">
aaa
</div>
</div>
</body>
Javascript:
$(document).ready(function() {
$("#menu").click(function(e) {
var selected = this.attr('href');
$('#main' + selected).show('slow').siblings().hide('slow');
});
});
EDITED:
Copy/pasting made me careless so now there are only unique id's. Also replaced the fiddle with a working one (solution).
UPDATE:
In case anyone uses slicknav as a plugin on his/her's page, to get to the element you have in your menu you need to find how exactly slicknav injected it into your page. For instance, in my case, since i prepend it to my #menuBlock div tag. In order to find the element #novosti i had to dig in deep, since slicknav creates tags on its own in order to work the way it does.
In that case my javascript looked like this.
$(document).ready(function(){
$("#menuBlock div ul li a").click(function (e){
e.preventDefault();
var selected = $(this).attr('href');
$( selected ).fadeIn('slow').siblings().hide();
});
});
There should a space between 2 selectors if they have a parent child relationship, so change this line
$('#main' + selected).show('slow').siblings().hide('slow');
to
$('#main ' + selected).show('slow').siblings().hide('slow');
or simply the selected one (since it is already pointing to a specific element)
$(selected).show('slow').siblings().hide('slow');
check this updated fiddle
$(document).ready(function(){
$("#menu li a").click(function (e){ //bind the event on `a` rather than ul
var selected = $(this).attr('href'); //use $(this) instead of this
$( selected ).show('slow').siblings().hide('slow'); //explained above
});
});
There are more than one errors found in your code,
set a Jquery library
Id should be unique throughout the DOM
Replace this.attr with $(this).attr()
Descendant selector would be #menu #something not #menu#something
Should .stop() an animation before beginning the new one.
Try,
$(document).ready(function() {
$("#menu li a").click(function(e) {
e.preventDefault()
var selected = $(this).attr('href');
$('#main ' + selected).stop().show('slow').siblings().hide('slow');
});
});
DEMO
Try this method
$(document).ready(function() {
$("#menu a").click(function(e) {
debugger;
var selected = $(this).attr('name');
$('#main div').hide();
$('#main div[name="'+selected+'"]').show('slow');
});
});
You are not supposed to have more than one element with the same ID on a page, so change the id on the page to something more specific. Or I'm I mistaken? From your question, you wanted something more extensible, here is an approach
$(document).ready(function(){
$("#menu").click(function (e){
var element = $(e.target).attr('href');
$('#main-divs > ' + element).show('slow').siblings().hide('slow');
});
});
I have this HTML:
<li class="chatbox-item">
<div class="item">
<div class="item-header">
X
</div>
</div>
</li>
When a.close-chatbox is clicked, the .item element has to be hidden. However, I just can't seem to go up two levels to hide the .item element.
I have this JS:
$(".close-chatbox").click(function() {
// not working
$(this).parent().parent().hide();
// not working, hides `.chatbox-item` element, and eq(1) doesn't do anything either
//$(this).parents().eq(2).hide();
});
How can I get the .item element to be hidden when the .close-chatbox element is clicked?
Don't assign your action to a var, just use it:
$(function () {
$(".close-chatbox").click(function () {
$(this).parent().parent().hide();
});
});
JSFiddle: http://jsfiddle.net/ghorg12110/tkocx8ng/
You can either use,
$(this).parent().parent().hide();
or you can use .closest("element"),
$(this).closest(".item")
Use .closest() in jquery
$(this).closest('.item').hide();
Fiddle
I wanna toggle 3 div.
In the start situation I have the first div that is not trigger able for the clic because its ID.
When I click the second or third div (triggered), the DIV clicked have to become unclickable and the others 2 clickable.
I attach my live example:
http://jsfiddle.net/YV3V5/
HTML:
<div id = "not-selectable" class = "btn1">Div 1</div>
<div id = "selectable" class = "btn2">Div 2</div>
<div id = "selectable" class = "btn3">Div 3</div>
JAVASCRIPT:
$( "#selectable" ).click(function(e) {
var className = $(this).attr('class');
alert(className);
if (className == "btn1") {
$("btn1").attr("selectable","not-selectable");
$("btn2").attr("not-selectable","selectable");
$("btn3").attr("not-selectable","selectable");
} else if (className == "btn2") {
$("btn2").attr("selectable","not-selectable");
$("btn1").attr("not-selectable","selectable");
$("btn3").attr("not-selectable","selectable");
} else if (className == "btn3") {
$("btn3").attr("selectable","not-selectable");
$("btn1").attr("not-selectable","selectable");
$("btn2").attr("not-selectable","selectable");
}
});
In this situation when I click the second DIV, it should became unclickable....but nothing happens.
Thanks for you're help!
You have several errors in your code. The most important being that IDs should be unique. Secondly you are trying to assign values to attributes "selectable" and "not-selectable". These attributes do not exist.
If you lay out your markup correctly, you could do this pretty simple. I would suggest something like this:
HTML
<div class="buttons">
<div class="button">Div 1</div>
<div class="button selectable">Div 2</div>
<div class="button selectable">Div 3</div>
</div>
jQuery
$( ".buttons" ).on("click",".selectable",function(e) {
$('.button').addClass('selectable');
$(this).removeClass('selectable');
});
Can be tested here
(I've added a parent element to simplify event delegation in jQuery.)
there is no attribute called selectable for html tags.
when you write $("btn3").attr("selectable","not-selectable"); it means set the selectable attribute of btn3 to value 'not-selectable'.
also as btn3 is a class you should have written $('.btn3') instead of $('btn3')
WORKING DEMO http://jsfiddle.net/YV3V5/23/
There was a lot wrong with your code :
1) using duplicate id's : Id's must be unique , one per page. Classes do not have to be unique. So I changed around your id's and classes.
2) you should change classes with addClass/removeClass/or toggleClass
3) you shouldn't use a class your removing as the trigger of the click function, so I gave them all a same class of btn.
html :
<div id="btn1" class="not-selectable btn">Div 1</div>
<div id="btn2" class="selectable btn">Div 2</div>
<div id="btn3" class="selectable btn">Div 3</div>
css I added background of blue for selectable and red for not-selectable so easier to visualize what's happening:
.selectable {
background: blue;
}
.not-selectable {
background: red;
}
jquery :
$(document).ready(function () {
$(".btn").click(function (e) {
var id = $(this).attr('id');
if (id == "btn1") {
$("#btn1").removeClass("selectable").addClass("not-selectable");
$("#btn2").addClass("selectable").removeClass("not-selectable");
$("#btn3").addClass("selectable").removeClass("not-selectable");
} else if (id == "btn2") {
$("#btn2").removeClass("selectable").addClass("not-selectable");
$("#btn1").addClass("selectable").removeClass("not-selectable");
$("#btn3").addClass("selectable").removeClass("not-selectable");
} else if (id == "btn3") {
$("#btn3").removeClass("selectable").addClass("not-selectable");
$("#btn1").addClass("selectable").removeClass("not-selectable");
$("#btn2").addClass("selectable").removeClass("not-selectable");
}
});
});
.attr() sets the attribute to the tags. So like you would get <div non-selectable='selectable'> for that code. Here is the documentation. I would use .removeClass() and .addClass() though there might be a more efficient way.
I know this is going to be an easy thing to do for someone with javascript experience, but I'm drawing a blank.
I have a list of items:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
</div>
I would like to highlight(change the background color) the selected list item on the left and then on a click of the button, move the selected item to the right div, and finally changing the background color back.
I've seen this many, many times online. But can't for the life of me, come up with how to do it.
Something like this (jquery) should do the trick:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function() {
$(this).toggleClass('active');
});
// on click of the move button
$('#addElement').click(function() {
// get the items to move
var $items = $('#left-side li.active');
// remove their active state
$items.removeClass('active');
// append them to the right side list
$('#right-side ul').append($items);
});
As you can see the code is indeed pretty straigh forward.
I also set up a small example to demonstrate: http://jsfiddle.net/NbcS9/
edit:
If you only want to be able to only select a single item on the left, you could do something like this in stead:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function () {
// remove active class from all other items
$('#left-side li').not($(this)).removeClass('active');
// toggle the active class on the clicked item
$(this).toggleClass('active');
});
And the updated fiddle:
http://jsfiddle.net/NbcS9/1/
I'd start by adding an empty <ul></ul> to your right side div, then use this:
$('#left-side li').click(function () {
$(this).toggleClass('selected');
});
$('#addElement').click(function () {
$('#left-side li.selected').appendTo($('#right-side ul'));
});
jsFiddle example
You may try this
$(function(){
$('#left-side ul li').on('click', function(){
$(this).toggleClass('selected');
});
$('#addElement').on('click', function(){
$('#left-side ul li.selected').appendTo($('#right-side ul'));
});
});
DEMO.
Using pure JavaScript would be tricky to do this, but using JQuery you can do this sort of easily. Add click events to the two divs which would append the selected text of the other to itself. to get the selected data add a function like this:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
Also, I would look into Jquery Draggable(). sounds like something that could relate to your desired end result. http://jqueryui.com/draggable/
css:
.highlighted { background: yellow; }
html:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
<ul></ul>
</div>
JS:
$('#left-side').find('li').on('click', function(event) {
$(this)
.siblings().removeClass('highlighted')
.end()
.addClass('highlighted');
});
$('#addElement').on('click', function(event) {
event.preventDefault();
$('#left-side').find('li.highlighted').appendTo('#right-side ul'));
});