With Jquery, I am trying to make a function similar to the filtering system used in this website(example)
If you click one of the filter elements, it will be displayed in another area. You can remove the selected filter by just clicking it.
My code works for cloning a filter element and displaying it in another area but
I am having a trouble with removing it.
I did hours of research but could not find any solution so your help will be greatly appreciated!
Here is my code
---html---
<div id="filter-selected>
<ul>
<!--selected element comes here -->
</ul>
</div>
<div id="filter-options">
<ul>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value1</span>
</li>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value2</span>
</li>
</ul>
</div>
---Jquery---
$('#filter-options > ul > li').click(function(event){
var $filter = $(this).children('span').clone();
$filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});
$(.filtering').click(function(){
$(this).remove();
});
Since the elements are created dynamically, You need event delegation
$('#filter-selected').on('click', '.filtering', function(){
$(this).remove();
});
You are missing string quote on left side ' of .filtering which might be a problem.
$(.filtering').click(function(){
Related
I go through an array of objects to display in my html some information boxes that are selectable. For it I bind a class in the event click, but as I obtain the elements through a v-for, when I select one it bind the class to all of them.
How can I differentiate only the selected one?
I have seen several examples with jquery but I would like to know if there is any other method.
My template:
<div class="list-services">
<div class='column-service'
v-for='estimation in filteredEstimation'
v-bind:key="estimation.name"
:class="{ focusService }"
#click="focusService = !focusService"
>
<div class="service-name">
{{estimation.name}}
</div>
<div class="service-description">
{{estimation.description}}
</div>
<div class="service-price">
{{estimation.price}}
<span class="price-currency">€</span>
</div>
</div>
</div>
Thank you very much for your time and help.
I was trying to make a jsfiddle to answer your question, but then I found this jsfiddle on the vue.js forum: https://jsfiddle.net/mogtfpze/2/
It offers three different options for highlighting content by clicking.
li v-for="item in items"
:class="{highlight:item.id == selected}"
#click="selected = item.id">
{{item.id}}
</li>
Although it's an old answer, I believe it should still be compatible with the current Vue version.
If not, or if something is not clear, just let me know and I'll try to help you out!
The method that I use personally (If I understand your question correctly) is the this keyword.
For example:
index.html
<ul id="myList">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
script.js (Vanilla JavaScript)
var myList = document.getElementById("myList");
myList.addEventListener("click", function () {
console.log(this);
console.log(this.innerText);
});
script.js (jQuery)
var myList = $("#myList").on("click", function() {
console.log(this);
console.log(this.innerText);
});
In this case, using the this keyword allows us to get the innerText of the li element that was clicked by only attaching the event listener to the parent element. innerHtml is only one of many ways to use this keyword. You can see more of them by doing console.log(this) in your event listener function.
Let me know if this helps!
I have this sortable item list using jQuery UI Sortable, which is also able to nest items.
Each of these items contains toggable content, it will slide down when clicking on an item.
However, when clicking on the parent item when nested, instead of only toggling the parent content it's also toggling the child's content.
I've been trying to figure it out in my Jquery script but haven't been able to figure it out. I reproduced my issue in this fiddle:
https://jsfiddle.net/es3hbdnm/33/
Also HTML:
<ol class="sortable panel-group">
<li class="panel-default">
<div class="toggle">Home</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">About us</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">Contact</div>
<div class="panel-content">Hidden content</div>
</li>
</ol>
My JS:
$(document).ready(function () {
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
$(".panel-default").click(function ( event ) {
event.stopImmediatePropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content").slideDown();
});
});
You should slideDown only the first '.panel-content' found.
$(".panel-default").click(function (event) {
event.preventDefault();
event.stopPropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content:first:hidden").slideDown();
});
Note, .find() returns a list of descendants of each element in the current set of matched elements. So in case the parent item is clicked the list will also include the child item. Reducing the set of matched elements to the first in the set should do the trick.
$(this).find(".panel-content").first().slideDown();
EDIT: Besides this, my suggestion is to use the following to be able to slide up a previously slided down element. See also my updated fiddle. Note, the selector you have provided to .not does not match asthisis a ".panel-default" node rather than a ".panel-content" node.
$(".panel-content").not($(".panel-content:first", this)).slideUp();
jsFiddle
Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>
you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).
Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");
You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");
Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.
As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});
I've got a website under prestashop, and my dropdown menu has different categories that are all clickable. I would like to remove the links from the "Marques" and "Les Gammes" categories and leave just the text. I'm using the each() function to select all my categories, but this returns an array within the li and the ul inside the li.
Here is the JSFiddle.
Here is the js code:
$('jms-mega-menu').ready(function () {
// Get each div
$('.notlink').each(function () {
// Get the content
var str = $(this).text();
$(this).html(str);
});
});
And here is a sample of my html code. You can find the full code on the fiddle.
<ul jms-mega-menu>
<div>
...
<ul class="mega-nav level1">
<li class=" haschild group notlink"><a id="item-8" href="#">Marques</a>
<ul>
<li><a id="item-9" href="#">Apple</a></li>
<li><a id="item-10" href="#">Samsung</a></li>
</ul>
</li>
</ul>
<ul>
...
One solution would be use unwrap to remove the a tag from around the text. Note the use of .notlink > a to only affect anchors that are direct children of the .notlink and not the nested lists:
$('.notlink > a').contents().unwrap();
http://jsfiddle.net/orvrj7qs/5/
Another option which may be a bit more extensible would be to use replaceWith, which would allow you to make additional modifications to the text if needed:
$('.notlink > a').replaceWith(function(){
return $(this).text();
});
In this case, we simply replace the anchor with just the text within the anchor.
http://jsfiddle.net/orvrj7qs/6/
I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?
You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>
I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).
Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)