I've been struggling with this for hours so hope someone can please help.
I have a dropdown menu (.category-navbar) which filters images shown below it. Whichever item is selected in the list is given the class '.select' - what I want is to have a label above that which displays the text of the selected list item.
<div class="dropdown-menu-portfolio">
<label>All</label> // This is the text I want to update
<ul class="category-navbar">
<li class="select">
<a>All</a>
</li>
<li>
<a>Item2</a>
</li>
<li>
<a>Item3</a>
</li>
<li>
<a>Item4</a>
</li>
</ul>
</div>
The label will initially show the text 'All' (as that is the default list item), but I want that to change when one of the other menu items are selected ie. 'Item2', 'Item3' etc.
Below is the code showing what I think I need, I've tried variations of this but nothing has worked - I've put 'copy' and 'replace' to show want I want to happen.
$(".category-navbar li a").click(function() {
$(this)
.copy(".select a").text()
.replace(".dropdown-menu-portfolio label").text();
});
Whilst trying to get anything to work, I found the code below does work, but obviously isn't right as it adds the newly selected item after the label, also it adds the text as a link, whereas I only want plain text.
$(".category-navbar li a").click(function() {
$(this)
.clone(".select a")
.appendTo(".dropdown-menu-portfolio label");
});
Any help would be much appreciated, thanks.
A simple solution would be:
$(".category-navbar li a").click(function() {
// Modifying the label
$('div.dropdown-menu-portfolio label').text($(this).text());
// Removing the class 'select' to the item previously selected
$('li.select').removeClass('select');
// Giving the class 'select' to the item currently selected
$(this).parent().addClass('select');
});
You're overthinking this. Just try
$(".dropdown-menu-portfolio label").text($(this).text());
Your syntax was wrong aside from this better solution.
Related
I am using WooCommerce 3.5.7 , and WordPress 5.0.4.
I have a number of products attached to multiple categories:
e.g.
Product 1, attached to categories A,B, C
Product 2, attached to categories A,Y, C
etc...
I want to hide category C from the site so that it is not visible when the categories are displayed in the site category menu navigation on the front-end.
I have tried numerous approaches but none seem to work,
First Approach:
Hiding via CSS.
The structure of the navigation menu is as follows:
<li class="cat-item ">
<span class="icon-toggle"></span>
category-text
</li>
I attempted to hide the element using the below CSS:
a[href="https://siteurl.com/product-category/category-url/"]
{
display: none!important;
}
The problem with this is it removed the hyperlink and text but the category still 'took up space' on the page. This was because this only hides the anchor element and not the entire <li class="cat-item "> that is the parent of that element.
I was unable to find any way to target the parent of a child element in CSS.
Second Approach: Using pre_get_posts:
https://wordpress.stackexchange.com/questions/90923/pre-get-posts-for-exclude-category
$catid = "-1031";
$excludeCategory = function ($catid)
{
return function ($query)
{
if (
$query->is_home()
&& $query->is_main_query()
) {
$query->set('cat', $catid);
}
};
};
add_action('pre_get_posts', $excludeCategory($catid));
In the above example, the category ID I want to hide is '1031'. But this did not work.
Any suggestions, how I can remove this product category so that it does not display in the front end, but is preserved in the backend?
You could try adding onclick="hide()" to the link, then add the following javascript:
function hide() {
document.getElementsByClassName("cat-item ").style.display = "none!important";
}
I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).
I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.
I hope that makes sense.
This is the HTML menu
<div id="mgf_165" class="mg_filter mg_new_filters">
<a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)">Bathrooms Sinks</a>
<a id="164" rel="164" class="mgf_id_164 mgf left_menu" href="javascript:void(0)">Bowed</a>
</div>
This is the jQuery and the div where I wanna display the text values.
<script type="text/javascript">
jQuery(document).ready(function(){
console.log('test');
jQuery("a.left_menu").click(function(){
var txt = jQuery("a.left_menu").text();
//$(this).attr('rel');
jQuery("#category").append(txt);
});
});
</script>
<div id="category">
</div>
At the moment when I click on, say, "Bowed", this displays in the div
Bathrooms SinksBowed
And if I click again on "Bathroom Sinks", the same thing repeats
Bathrooms SinksBowedBathrooms SinksBowed
How can I deal with that? And did I follow the correct logic here?
You are currently getting the text of all the menu items and then appending it to the div.
You need to get the text of the clicked menu item, and then set the content of the div to the text value of that menu item.
jQuery(this) // the clicked menu item
jQuery('#category').text('VALUE') // set the text content of the tag to VALUE
Working solution on JSFiddle..
See Inside the Event Handling Function to learn more about jQuery event handling.
I have this Show/Hide select box (JS Fiddle) that gets a classname from a selected option and hides a corresponding unordered list item. I am at a loss to use replace() to replace the text Hide with Show or vice versa when an option is clicked.(e.g Show Month should become Hide Month on click.)
I also want to change all the options back to Hide when I click the Show All option.
When I used
findoption.replace('Hide','Show'); I got this Uncaught TypeError: undefined is not a function error. Can anyone show me how to do that? Any help would be appreciated.
JS Code:
$(document).ready(function(){
$(".showhidelist").change(function() {
$this = $(this);
var findoption = $this.find('option:selected');
var selected = findoption.data('hide');
var show_hide_li = $("."+selected);
if (show_hide_li.css("display") == "none") {
show_hide_li.show();
/* Want to Replace the text Hide with Show */
}
else if (show_hide_li.is(':visible')){
show_hide_li.hide();
/* Want to Replace the text Show with Hide */
}
else if (selected == "Reset") {
$('li').show();
/* Want to Replace the text Show with Hide if it's true */
}
});
});
HTML
<select class="showhidelist">
<option data-hide="Reset">Show All</option>
<option data-hide="year">Hide Year</option>
<option data-hide="month">Hide Month</option>
<option data-hide="day">Hide Day</option>
</select>
<ul id="list">
<li class="year">2004</li>
<li class="month">Feb</li>
<li class="day">17</li>
<ul>
findoption is returns a jquery array, so you would need to access the first element there. I think the following will achieve what you're looking for (as far as the selected element goes).
findoption[0].innerHTML = findoption[0].innerHTML.replace('Show','Hide');
I'm not sure what you're really doing - this gets a little quirky, since you have the show/hide all and you'll have to go through the whole list to update them when you do. Also - you aren't getting a selected event when you re-select what's already selected.
UPDATE: this includes how to update all items in the list using each()
jsfiddle: http://jsfiddle.net/hk4wg/15/
You are not getting the text() into the replace, and you could use the function that .text() has to replace the text.
findoption.text(function(_,text){ return text.replace('Hide', 'Show')});
Change the word 'Hide' or 'Show' depend on what you want.
Update:
I read in caspian comment, that you problem now is that you could not re-click an option clicked, try restarting the select to first option like:
$(".showhidelist").prop('selectedIndex',0);
I am trying to create an interactive to do list in which I enter text into a text box, click a button, and it adds the items underneath. So far I have successfully been able to add items to my list using the button but am not able to remove one item at a time by clicking on it, which is what I would like to be able to do. (Ideally each item would have a check box next to it and when I click that the item would disappear). So far, using the .remove() action I have only been able to make ALL of the items in my list disappear by clicking. I did some research and thought that the .on() action may be what I need. I tried it and now I cannot make items disappear at all. This is my code:
$(document).ready(function() {
$('#button').click(function() {
var toAdd=$('input[name=checkListItem]').val();
$('#item').append.('.list');
});
$(document).on('click','item',function() {
$(this).remove();
});
});
Is there anything that stands out as being incorrect? Or is there a better way to go about this? I am brand new to this and appreciate any and all feedback.Thank you!
I forked your fiddle, with corrected code: http://jsfiddle.net/XEDHJ/2/
Here's where you were having trouble:
$('.list').on('click','input',function() {
$(this).parent().remove();
});
Using on was the right idea, it's perfect for this situation. The way you use on is that you have a parent node, in this case a div with a class of list, and a number of matched child nodes, in this case any element that is an input underneath your parent node. Child nodes are denoted by the selector in the second argument. This will match any input node under your div even if they are created after the page is rendered.
Because I wrapped your input in a <div> tag, we actually want to remove that parent <div>. So we call $(this).parent().remove().
I left my original example below but this should be sufficient to get you going.
It looks like something like this is what you're looking for:
Fiddle
http://jsfiddle.net/Khesy/
JavaScript
$(document).ready(function() {
$('#button').click(function() {
$('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
});
$('#item').on('click','input',function() {
$(this).parent().remove();
});
});
HTML
<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>
I've this markup
<ul id="body">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
When an item is clicked, is there a way in jQuery to identify in the DOM, the previous and the next li so that I can use jQuery functions on those elements??
Say, if the person clicks on item 2, i want to hide item 1 and item 3.. similarly, if the user clicks on item 3, hide item 2 and item 4 (previous and next item in the list).
Get a pointer to the previous and next elements.
Select all siblings that are not the previous and next elements.
Hide the previous and next siblings.
Show the other elements.
This allows the code to work more than once :)
$('#body > li').click(function() {
var prev = $(this).prev(),
next = $(this).next(),
siblings = $(this).siblings().not(prev).not(next);
prev.add(next).hide();
siblings.show();
});
jsFiddle.
If you don't care if the other elements are hidden forever once clicked, simply remove the all references to the siblings variable and its relevant code.
$('#body .item').click(function() {
$(this).prev().add($(this).next()).hide();
});
Edit:
$('#body .item').click(function() {
$(this).siblings().show().end().prev().add($(this).next()).hide();
});
From the comment, This will show all before hiding the prev and next li elements.