I run a loop and create filters, which I pack in categories (packed in <ul>). These filters can be activated with checkboxes (packed in <li> within the <ul>). I can have 2 or 5 category filters, so 2 or 5 <ul> with multiple <li> inside each. With css all <li> checkboxes above 3 are hidden at start, and I use a "show more" element (in <span>) that is located just before </ul>.
As it's a loop, all <ul> elements use the same id="filterlist" and class="sidebar-ul". Also all the <li> checkboxes have the same class="sidebarfilters".
I have a JQuery each function, and on click on one of the <span> I only want to show the hidden <li> elements, that are placed within the <ul> element, in which also the clicked span is located.
At the moment, if I click on one of the "show more" spans, all <li> checkboxes of all <ul> are shown.
Is there a way (maybe with "$(this)") somehow to show only the correct <li>, even though classes are the same?
Also, I want to hide the "show more" span if all <li> elements are shown, this is not working as well. The <span> stays visible after all checkboxes are shown. Any input would be very much appreciated. My simplified code, CSS and JQuery are:
{% for tag in tags %}
<ul id="filterlist" class="sidebar-ul">
{% if current_tags contains tag %}
<li class="sidebarfilters">
<input class="filter_checkbox" id="checked" type="checkbox" checked onClick="">
</li>
<span class="showmorefilters">mehr...</span></ul>
</ul>
{% endfor %}
$(function() {
$(".showmorefilters").each(function() {
$(this).click(function() {
$('#filterlist li:hidden').show();
if ($('#filterlist li').length == $('#filterlist li:visible').length) {
$(this).hide();
}
});
});
});
.sidebarfilters:nth-child(n+5) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Sounds like content is being created dynamically. Would advise using .on() versus .click(). Have to make a lot of assumptions without proper example.
Consider the following.
$(function() {
$("ul[id^='filterlist']").on("click", ".showmorefilters", function(e) {
var fl = $(this).parent();
fl.find("li:hidden").show();
if ($('li', fl).length == $('li:visible', fl).length) {
$(this).hide();
}
});
});
This will bind a Click event to all .showmorefilters elements and perform a callback that is relative to that target.
Related
I have the following code structure. Its a set of wordpress tabs. I have many tabs all over the website, using Jquery i want to trigger a function when a user clicks one of the links, however i cant apply a ID atribute so my funtion below doesnt work...any suggestions?
JQUERY
$('#1485856532455-70ee0dfe').on('click', function() {
$('.otherdiv').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
HTML
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span></li>
</ul>
You can't select them by ID because they don't have IDs. But you can use CSS Atrribute-Equal Selector to get them by href attribute. Like this:
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {
// ...
}
More CSS Selectors here.
Working code snippet:
$('[href = "#1485856532455-70ee0dfe"]').click(function() {
alert("#1485856532455-70ee0dfe was clicked! Hoooray!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span>
</a>
</li>
<li class="vc_tta-tab">
<span class="vc_tta-title-text">Title</span>
</li>
</ul>
Use attribute selector then :
$('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
$('#1485856532455-70ee0dfe').on('click', function() { - means that on page we have some element with id 1485856532455-70ee0dfe. In your html code no id with text 1485856532455-70ee0dfe, thats why your code not work.
You have two case to fix:
add id's to needed element
change js to $('[href="1485856532455-70ee0dfe"]').on('click', function() {
You cant give a id to a link like that. However you can select the link with jquery by doing $('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});
I want to add class on particular element which already have class when second child of list item clicked then remove that class if any other list item clicked.
i can add class onclick of link but don't understand how to add condition when other list item clicked rather then 2nd child so i can remove that added class.
<ul class="acf-hl acf-tab-group">
<li>tab1</li>
<li class="active">tab2</li>
<li>tab3</li>
</ul>
<div class="single-item ae0fgf0c hidden-by-tab"></div>
<div class="single-item ae0fgf0b hidden-by-tab"></div>
<h3 class="submit-button">Budget</h3>
<div class="single-item ae0fgf045"></div>
<div class="single-item ae0fgf0e"></div>
<div class="single-item ae0fgf0cf hidden-by-tab"></div>
<div class="single-item ae0fgf0t hidden-by-tab"></div>
Basically its a wordpress custom field plugin so it added ".hidden-by-tab" class when item is clicked to the other items related element and i added a html code h3 before certain class like above
<h3 class="submit-button">Budget</h3>
Now this h3 will showing up on other tab content part i want to make this hide on other tab content, i just want to show this on 2nd list content.
jQuery(document).ready(function($){
$(".acf-field-54f5a4c9a71b0").before('<h3 class="submit-head">BUDGET</h3>');
$(".acf-field-54f5a4c9a7497").before('<h3 class="submit-head">FUNDING</h3>');
});
Above is the jquery code i use to add h3 before particular classes is there any solution to hide this like the related class hide on other tab, if you see above code add ".active" class above i tried to target the by that class but not succesfull.
if($(.acf-tab-group li:nth-child(2)).hasClass('active')){
$(.submit-button).addClass("selected");
}
In jsfiddle it add class but in real code it doesn't. please help me out or let me know if there is need of further explaination.
I guess this is what you want:
$('.acf-hl').on('click', 'li', function () {
if ($(this).index() == 1 && $(this).hasClass('active')) $('h3.submit-button').addClass('active');
else $('.active').removeClass('active');
return false;
});
Demo: https://jsfiddle.net/tusharj/amrq3bf4/4/
Another Demo: https://jsfiddle.net/tusharj/amrq3bf4/5/
I hope this is what you are looking for.
$('.acf-tab-group > li').click(function(){
var flag=$(this).hasClass('active');
if(flag){$('.submit-button').addClass("selected")}
else{$('.submit-button').removeAttr('class').addClass('submit-button')}
})
removeAttr will remove entire class attribute so i have added .submit-button class again.
so I am creating a website that has dynamically added content and I want to bind on click events to the list items. The problem is I have a list item within a list item and I can not seem to get the second one to work.
HTML
<ul id="users" class="grid">
<li>
<figure>
<img src="image source" alt="Title" />
<figcaption>
<div>
<h3>Title</h3>
<ol>
<li> <span>Additional Button</span> </li>
<li> <span>Additional Button</span> </li>
<li> <span>Additional Button</span> </li>
</ol>
</div>
</figcaption>
</figure>
</li>
</ul>
Here is the JS
$('ul#users').on("click", "li", function(e) {
console.log($(this));
});
$('.grid ol').on("click", "li", function(e) {
console.log($(this));
});
The first bind works without an issue but the second one is never called. Does anyone have an idea on how to get this to work. Please keep in mind that the LI elements are all dynamically created.
If all your li elements asre dynamically created, (ul.grid>li and ol>li) then your click handler to .grid ol > li must be assigned each time you create ol element in .grid>li.
Another way is try to change from:
$('.grid ol').on("click", "li", function(e) {
console.log($(this));
});
to:
$('.grid').on("click", "li>ol>li", function(e) {
console.log($(this));
});
P.S. if you dynamically create elements, then add handlers to them when they are created (if that allow application logic).
Simple rule to do events on dynamic content is to apply bind event on closest outer parent that is not generated dynamically.
Example:
$('.grid').on('click', 'ol>li', function(e){
console.log($(this));
});
Just basically bind event on your not-dynamically created parent and manipulate selector inside of .on() context.
Your selector isn't working, change it to something like this:
$('ol li').on("click", "li", function(e) {
console.log($(this));
});
I have seen that the inline/html events like onclick, mouseover etc are being used less and less and it is advised to register events using Javascript.
I currently have some HTML like:
<ul id="supported-locations">
<li onclick="setLocationId(32);">Mexico</li>
<li onclick="setLocationId(35);">Mongolia</li>
</ul>
Which works fine but I want to now do this without the "onclick" in the HTML but still be able to retrieve the ID number.
The <li> elements are retrieved via AJAX while the user types into an input box it queries the database and retrieve the data without loading the page.
When the user clicks on one of the countries it will run the setLocationId function which just simply sets a hidden HTML form element with the ID of the selected country so I can use that once the form is submitted.
How do you register an event listener for these <li>'s when the countries and their ID's will always be different and changing depending on what the user types into the box?
Use a data attribute to hold the number. On the onclick event, read the attribute on the element that was clicked.
HTML:
<ul id="supported-locations">
<li data-code="32">Mexico</li>
<li data-code="35">Mongolia</li>
</ul>
JavaScript:
$("#supported-locations").on("click", "li", function() {
var li = $(this);
console.log(li.data("code"));
});
Example:
JSFiddle
<ul id="supported-locations">
<li data-id="32">Mexico</li>
<li data-id="35">Mongolia</li>
</ul>
in jQuery
$('#supported-locations').on('click','li',function(){
setLocationId($(this).data('id'));
})
<ul id="supported-locations">
<li data-id="32">Mexico</li>
<li data-id="35">Mongolia</li>
</ul>
jQuery(function(){
$('#supported-locations li').click(function(){
alert($(this).data('id'))
})
})
I recommend giving a class to the dynamically loaded elements, then use jquery .on(http://api.jquery.com/on/) method to register event listeneres to elements belonging to a class, even those that are dinamically loaded..
Then you could just read out the data stored in the element(in the form of data-something attributes).
<ul id="supported-locations>
<li id="32">Mexico</li>
<li id="35">Mongolia</li>
</ul>
//Jquery
$("#supported-locations > li").on('click',function(){
setLocationId($(this).attr('id'));
});
When you register your event, you still have the ability to use this, which is linked to the HTML element.
In other word, you still can do something like that
<li id="YOUR_ID">Mexico</li>
And get the id of the li tag
You can attach an event handler to the li:
<ul id="supported-locations">
<li id="location32">Mexico</li>
<li id="location35">Mongolia</li>
</ul>
$("#supported-locations li").click(function() {
alert($(this).attr("id"));
});
http://jsfiddle.net/puL95/
try this.
$("#supported-locations li").click(function() {
alert("me")
}
I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.