I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});
Related
I have lots of repeated Jquery code with small differences. I wonder if its possible to merge the following Jquery code into one:
$(".dropdown-menu-attributes li a").click(function(){
$("#modal-button-attributes:first-child").text($(this).text());
});
$(".dropdown-menu-operators li a").click(function(){
$("#modal-button-operators:first-child").text($(this).text());
});
$(".dropdown-menu-and-or li a").click(function(){
$("#modal-button-and-or:first-child").text($(this).text());
});
I tried this but doesn't work for the second and third classes.
$(".dropdown-menu-attributes .dropdown-menu-and-or .dropdown-menu-operators li a").click(function(){
$("#modal-button-attributes:first-child #modal-button-operators:first-child #modal-button-and-or:first-child").text($(this).text());
});
You want to use the , (Multiple Selector) selector:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
to first find those three elements, and then on the result set you would do another search to find the li a. The final code would look that way:
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.click(function(){
});
To get the correct id you would need to store that id somewhere. One way would be to add it to the corresponding element that holds those classes using the data-* attribute. And search for that using closest
$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
.find('li a')
.on('click', function(e) {
var id = $(this).closest('[data-modal-button-id]').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>
How you want to name the data-* attribute depends on you, there is most likely a better name for that.
In general I would choose another setup and use a common class instead
$('.dropdown-menu li a')
.on('click', function(e) {
var id = $(this).closest('.dropdown-menu').data().modalButtonId;
console.log('#modal-button-'+id+':first-child');
$('#modal-button-'+id+':first-child').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu-attributes" data-modal-button-id="attributes">
<ul>
<li><a>test1</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-and-or" data-modal-button-id="and-or">
<ul>
<li><a>test2</a></li>
</ul>
</div>
<div class="dropdown-menu dropdown-menu-operators" data-modal-button-id="operators">
<ul>
<li><a>test3</a></li>
</ul>
</div>
So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.
I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.
I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html
it should work too-
$("#1").css("display","block");
$("#1").click("show");
should be:
$("#1").show();
Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle
as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}
HTML:
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>
JQUERY:
$('a').on('click', function(e) {
$('#somediv').html($('."this.id"').text());
e.preventDefault();
});
Basically what I want to do is, when I click one of the links in the list, it replaces the contents of "somediv" with the contents of a div that has the class that matches the id of the link.
In other words, when I click link id "a1", I want it to display class "a1" in "somediv". I just don't know the syntax for how to call that in the second line of the jquery.
Do this
$("#a1").click(function() {
var divClass = $(this).attr("id");
$("#somediv").empty().append($("."+divClass).html());
});
http://jsfiddle.net/vD4hA/
Only issue was with your concatination.
You don't need to use $(this).attr('id') since this inside the context is the DOM element and id or any attribute can be retrieved directly as object properties.
$('a').on('click', function(e) {
$('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.'
//but it is safe to use as you are not selecting based on id(unique) but a class which
//can be in multiple places.
});
$('a').click(function (e) {
$('#somediv').html($('.' + $(this).attr('id'))).text();
e.preventDefault();
});
jsFiddle example
I suggest you modify slightly your code to accept the new HTML5 specifications. More specifically, use the aria-owns which is exactly what you're doing here. See demo.
HTML
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div style="display:none;">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
JS
$("a[aria-owns]").on("click", function(e) {
$("#somediv").empty()
.append($("#" + $(this).attr("aria-owns")).clone());
return e.preventDefault(), false;
});