So what I'm trying to do is update the 'topic' selection based on what 'category' a user has chosen. What I'm trying to do is watch for a change event of the attribute 'data-curr_filter' on the element with ID 'category-filter'. My jQuery for each category works as tested via web-inspector, so I believe it has something to do with the .on('change') portion of the function (it doesn't trigger the console.log). The code for this is as follows:
The HTML for search-filter:
<span id="category-filter" class="filter-select" data-target="filter_categories" data-curr_filter="all">
All Categories <i class="fa fa-angle-down"></i></span>
filter by
<span class="filter-select" data-target="filter_topics">
All Topics <i class="fa fa-angle-down"></i>
</span>
The HTML for the 'topics':
<ul class="filter-list" id="filter_topics" aria-labelledby="filter_topics">
<li data-val="affordability" data-cat="communities">Affordability</li>
<li data-val="market_conditions" data-cat="communities">Market Conditions</li>
The jQuery:
$(document).ready(function() {
console.log("Hello Moto");
$(document).on('change', '#category-filter', function() {
console.log("Something change");
if ($('#category-filter').attr('data-curr_filter') == 'all' ){
$('#filter_topics li').show();
}
if ($('#category-filter').attr('data-curr_filter') == 'communities'){
//show all topics as a "blank slate" before altering the display elements according category
$('#filter_topics li').show();
//hide all the elements
$('#filter_topics li').toggle();
//show only the topics labeled with communities
$('#filter_topics li[data-cat=communities').toggle();
}
...
ANSWER:
Just doing an onclick works... Kinda annoyed at how I completely overlooked this.
$(document).on('click', '#filter_categories li', function() {
var selectedCategory = $(this).attr('data-val');
if (selectedCategory == 'all' ){
$('#filter_topics li').show();
}
if (selectedCategory == 'communities'){
//show all topics as a "blank slate" before altering the display elements according category
$('#filter_topics li').show();
//hide all the elements
$('#filter_topics li').toggle();
//show only the topics labeled with communities
$('#filter_topics li[data-cat=communities').toggle();
}
...
TL;DR under my question:
Because it is a <span> and not an <input>, <select> or <textarea> element, it does not have the .on('change') event watcher. If I come up with an answer I'll post it here.
Try this:
//$(document).ready(function() {
$(function() {
console.log("Hello Moto");
//$(document).on('change', '#category-filter[data-curr_filter]', function() {
$('#category-filter').change(function() {
console.log("Something change");
if ($('#category-filter').attr('data-curr_filter') == 'all') {
$('#filter_topics li').show();
}
if ($('#category-filter').attr('data-curr_filter') == 'communities') {
//show all topics as a "blank slate" before altering the display elements according category
$('#filter_topics li').show();
//hide all the elements
$('#filter_topics li').toggle();
//show only the topics labeled with communities
$('#filter_topics li[data-cat=communities').toggle();
}
...`
Related
Goal
clicking on a member of the <ul> selects/deselects it.
if class=allSearch is selected any other li's that are already selected are de-selected.
if allSearch is selected and then notAllSearch is selected, allSearch is deselected.
Problem
Goal 3 is not working, which doesn't make sense to me because it should be (and is) basically the same code used in Goal 2.
Here's the code:
HTML
<ul class="menu vertical" id="searchMenu">
<li id="allSearch" class="allSearch selected">All</li>
<li id="notAllSearch" class="notAllSearch">User</li>
<li id="notAllSearch" class="notAllSearch">Artists</li>
<li id="notAllSearch" class="notAllSearch">Events</li>
</ul>
JS:
$(document).ready(function() {
$('#searchMenu li').click(function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else if ($(this).hasClass('notAllSearch')) {
$('#allSearch').removeClass('selected')
$(this).addClass('selected');
}
else if ($(this).hasClass('allSearch')) {
$('#notAllSearch').removeClass('selected')
$(this).addClass('selected');
}
else
$(this).addClass('selected');
});
})
Try this : instead of ID work on CLASS for this
$(document).ready(function() {
$('#searchMenu li').click(function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else if ($(this).hasClass('notAllSearch')) {
$('.allSearch').removeClass('selected')
$(this).addClass('selected');
}
else if ($(this).hasClass('allSearch')) {
$('.notAllSearch').removeClass('selected')
$(this).addClass('selected');
}
else
$(this).addClass('selected');
});
});
Here is the pen to test
I am trying to use a custom data attribute to filter things via dropdown selections. I can't seem to get the selector to work correctly, and was just wondering if that is actually possible. Currently looking at https://api.jqueryui.com/data-selector/ but I can't seem to get it to work.
My HTML:
<div class="item-filter">
<form>
<select id="item-filter-select">
<option value="all" id="all">Show All</option>
<option value="clothes" id="clothes">Clothing</option>
<option value="jewelry" id="jewelry">Jewelry</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
</form>
</div>
<div class="item-display" id="item-display">
<div class="item clothes" id="item-clothes" data-type="clothes" data-name="Sweater01" data-price="15">
<span>Clothes</span><br>
Add to Cart
</div>
<div class="item jewelry" id="item-jewelry" data-type="jewelry" data-name="Necklace01" data-price="5">
<span>Jewelry</span><br>
Add to Cart
</div>
<div class="item misc" id="item-misc" data-type="misc" data-name="PhoneCase01" data-price="10">
<span>Misc</span><br>
Add to Cart
</div>
<div class="clear"></div>
</div>
My JS:
$( document ).ready(function() {
// Handler for .ready() called.
$('#item-filter-select').change(function() {
var clothes = $( "div:data(type, clothes)" );
if($(this).val() === 'clothes'){
clothes.hide();
console.log("You selected clothes");
}
else if($(this).val() === 'jewelry'){
console.log("You selected jewelry");
}
else if($(this).val() === 'misc'){
console.log("You selected miscellaneous");
}
else {
console.log("You are showing all");
}
});
});
I just want to hide the elements associated to the data type "selected" (I will eventually use the :not selector to hide elements that don't match) but for now I just need to get the selectors to work properly. Thank you for any help!
Just use the selects value directly to target the elements with the correct data attribute
$(document).ready(function () {
$('#item-filter-select').on('change', function () {
if (this.value == 'all') {
$('.item').show();
}else{
var elems = $('.item[data-type="'+this.value+'"]');
$('.item').not(elems).hide();
elems.show();
}
});
});
FIDDLE
or a shorter version of the above
$(document).ready(function () {
$('#item-filter-select').on('change', function () {
var elems = this.value == 'all' ? $('.item') : $('.item[data-type="'+this.value+'"]');
$('.item').not(elems.show()).hide();
});
});
FIDDLE
You can use not selector and data-attribute selector to hide all the elements that not match the selected filter attribute; remember to previously display them all.
Code:
$(document).ready(function () {
$('#item-filter-select').change(function () {
$("#item-display div").show();
if ($(this).val() === 'all') return
$("#item-display div:not([data-type='" + $(this).val() + "'])").hide();
});
});
Demo: http://jsfiddle.net/IrvinDominin/ff8kG/
Try this
$( document ).ready(function() {
// Handler for .ready() called.
$('#item-filter-select').change(function() {
var clothes = $( 'div[data-type="clothes"]' ),
value = this.value;
if(value === 'clothes'){
clothes.hide();
console.log("You selected clothes");
}
else if(value === 'jewelry'){
console.log("You selected jewelry");
}
else if(value === 'misc'){
console.log("You selected miscellaneous");
}
else {
console.log("You are showing all");
}
});
});
But since you have a a class with the same value you could use that..
var value = this.value,
clothes = $( '.clothes' );
Or to select based on the selection of the user
var value = this.value,
selection = $( '.'+value );
Or to hide all but the selection
var value = this.value,
all = $( '.item' ),
selected = all.filter('.' + value);
Demo at http://jsfiddle.net/S8UYy/
(shows selected and hides the rest)
You can do it like so:
$('#item-filter-select').change(function() {
var value = $(this).val();
var $selected= $('div').filter(function() {
return $(this).data("type") == value;
});
$('div').show();
$selected.hide();
});
DEMO
I need a some sort of a practical solution for toggle between different divs, when i click on a anchor tag.
I have done a JSfiddle that is kind of the solution i want.
the problem there is when i first click on "show 1" and then "show 2" the two first placeholders content disappear, but nothing new shows up.
I want it this way:
When i click "show 1", Two Placeholders appear(PlaceHolder 1 and 2).
When clicking "show 2" WITHOUT closing Placeholder 1 and 2. The PlaceHolder 1 and 2 should close AND PlaceHolder 3 should appear.
Jsfiddle: http://jsfiddle.net/CY3tj/2/
HTML:
<a id="1" class="show">show 1</a>
<br/ ><br/ >
<a id="2" class="show">show 2</a>
<div class="content-wrapper">
<div id="item-1">
<div>
<h2>Placeholder1</h2>
<p>Placeholder1</p>
</div>
<div>
<h2>PLaceHolder2</h2>
<p>Placeholder2</p>
</div>
</div>
<div id="item-2">
<div>
<h2>Placeholder3</h2>
<p>Placeholder3</p>
</div>
</div>
</div>
JQuery:
$(document).ready(function () {
$(".content-wrapper").hide();
});
$(document.body).on("click", "a.show", function () {
var id = $(this).attr("id");
$(".content-wrapper > div").each(function () {
if ($(this).attr("id") == "item-" + id) {
$(this).show();
} else {
$(this).hide();
}
});
$(".content-wrapper").toggle();
});
You can simplify this to:
$(function(){
var $allItems = $(".content-wrapper > div"); //Cache the collection here.
$(document).on("click", "a.show", function () {
var id = this.id, itemId = "#item-" + id; //get the id and itemId
$allItems.not($(itemId).toggle()).hide(); //Hide all items but not the one which is the target for which you will do a toggle
});
});
Demo
Instead of hiding the wrapper via JS, you can just add a rule to hide its contents.
.content-wrapper >div{
display:none;
}
Your main problem is your using $(.content-wrapper).toggle() You only want to hide the content wrapper initially and then after one click you want it to show up. By toggling your content wrapper you were making it dissapear every other click which was why you had to click twice to see it.
$(document.body).on("click", "a.show", function () {
var id = $(this).attr("id");
$(".content-wrapper > div").each(function () {
if ($(this).attr("id") == "item-" + id) {
$(this).show();
} else {
$(this).hide();
}
});
$(".content-wrapper").show();
});
If you are looking to keep the toggle functionality (to hide a div that is already showing) here is a solution for that.
$(document.body).on("click", "a.show", function () {
var id = $(this).attr("id");
if($(".content-wrapper #item-"+id).is(':visible'))
$(".content-wrapper").hide();
else{
$(".content-wrapper").children("div").hide();
$(".content-wrapper #item-"+id).show();
$(".content-wrapper").show();
}
});
You would gain more flexibility and performance by selecting the ids of the anchor tags. You should also hide the specific divs that you want to be hidden rather than hiding the overall container. That way, you can easily target which div you want to show and which one to hide.
$(document).ready(function () {
$(".content-wrapper > div").hide();
});
$("#1").click(function(){
$("#item-2").hide();
$("#item-1").show();
});
$("#2").click(function(){
$("#item-1").hide();
$("#item-2").show();
});
However, if you're looking to add an unknown number of these items, then you will want to select (for readability) just the element and class, rather than having to go through the document, which is just redundant.
$(document).ready(function () {
$(".content-wrapper > div").hide();
});
$("a.show").click(function(){
$(".content-wrapper > div").hide();
$("#item-" + $(this).attr("id").show();
});
I have this
HTML
<p class="showOnlyChoose"> Show </p>
<ul>
<li>Not Taken</li>
<li>Not Taken</li>
<li class="Choose">Taken</li>
<li>Not Taken</li>
<li class="Choose">Taken</li>
<li>Not Taken</li>
</ul>
What I am wanting is if I click on the Show only the Taken list will show and others will hide. I searched but did not find good results. Also is this possible with jQuery ? I am not very good in jQuery. Any help will be appreciated.
$('.showOnlyChoose').on('click', function() {
$('li.Choose').show().siblings().hide();
// $('li').hide().filter('.Choose').show();
})
You can use this:
$('.showOnlyChoose').click(function(){
$('li').toggle();
$('li.Choose').show();
var current_text = $(this).text();
$(this).text(current_text == "Show" ? "Show" : "Hide");
});
Demo here
And when you want to get them back just use: $('li').show();
If you want the paragraph to toggle the "Not Taken" rows and change "Show" to "Hide" (and vice versa), use:
$('.showOnlyChoose').on('click', function() {
$('li').toggle(); //show or hide all items
$('li.Choose').show(); //show .Choose items
if ($('.showOnlyChoose').html() == 'Show') { //if paragraph says "Show" change to "Hide"...
$('.showOnlyChoose').html('Hide');
}
else $('.showOnlyChoose').html('Show'); //...otherwise change "Hide" to "Show"
})
EDIT: Added "Show"/"Hide" functionality.
If you want to select elements by its content you can use $(selector).text()
$(".showOnlyChoose").click(function() {
$("ul li").each(function(){
if($(this).text() != 'Taken') {
$(this).hide();
}
});
});
If you want to select by class:
$(".showOnlyChoose").click(function() {
$("ul li").each(function(){
if(!$(this).hasClass("Choose") {
$(this).hide();
}
});
});
When a user clicks the Accordion Menu button it usually works. But, about 1 out of 10 times the animation doesn't stick and goes back to either expanded or collapsed, depending on what state it started at. I've copied the scripts from other places, but they seem simple enough.
HTML:
<ul id="system-nav">
<li><div>Umbrella</div>
<ul>
<li>Admin</li>
<li>Dashboard</li>
<li>Daylight</li>
</ul>
</li>
</ul>
Like I've said, I've tried several different versions of the same thing. These were just taken from random places and I've only edited them slightly. All of them do the same thing.
$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#system-nav ul').slideUp(300);
}
$(this).next().slideToggle(300).delay(250);
});
$('#system-nav ul:eq(0)').hide();
$(document).ready(function() {
$('#system-nav li div').click(function() {
$('#system-nav ul').slideUp('slow');
$(this).next().slideDown('slow');
});
$("#system-nav ul").hide();
});
$(document).ready(function(){
$('#system-nav li div').click(function() {
$(this).next().slideDown('slow');
return false;
}).next().hide();
});
In the first JS sample using :visible is not the right proprety. Use :hidden instead
In the second one you're cliping it ?
In the last one you're canceling it ?
Here's a working code: http://jsfiddle.net/Q9qNw/
$("#system-nav").on("click","div",function(){
if ($(this).next().is(":hidden")) {
$(this).next().slideDown("500");
} else {
$(this).next().slideUp("500");
}
});