I have a bunch of checkboxes with the same structure, but they are spans, not selects, so the way they appear to be checked is by adding a class.
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors"></span>
<span>All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
This is my JS:
function CheckBox() {
$(".checkbox").click(function () {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
}
});
};
What I want is, if I click on a specific checkbox, in this case, the one that says 'All' (I assume I should give it an id), I want all the items with the checkbox to be modified and added the class 'checked'. I don't know how to find them as they are in different divs.
What I have tried unsuccessfully is to use find() and then addClass():
$("#allColors").click(function () {
$.each('.checkbox-wrapper').find('.checkbox').addClass('checked');
})
Thank you :)
You can just make it like this if I remember correctly:
$('#AllColors').click(function(){
$('.checkbox-wrapper > .checkbox').addClass('checked')
})
I think you are looking for this with toggleClass():
$("#AllColors").click(function (){
$(".checkbox").toggleClass('checked');
});
.checked{
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors">All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
Or with addClass():
$("#AllColors").click(function (){
$(".checkbox").addClass('checked');
});
.checked{
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors">All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
There are some issues here:
you are using #allColors instead of #AllColors
you are using each in the wrong way
better use on() instead of click()
use this instead:
$("#AllColors").on('click', function(){
$('.checkbox-wrapper').each(function(){
$(this).find('.checkbox').addClass('checked')
})
})
Related
Sorry for my bad English. I have a problem.
I have construction with button and list of span. I need then i click on item of list (some span), text of my button change on text clickable span.
If i click first span then my button change text on "Text" or second span "Text2".
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
I have many construction like this on my page. How i connect this for id? Then if i click on span with equal class, this is change all my buttons text?
Use div class with span to change text of button like below. In multi-pal case parent() and prev() is your friend.
$('.collapsibleContent').find('span').click(function(e) {
let txt = $(this).text();
$(this).parent().prev('.switcher').text(txt);
});
span {
color: red;
text-decoration: underline;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
<button class="switcher collapsible">X2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text3</span>
<span class="choise__block-item">Text4</span>
</div>
Add click event for the class choise__block-item (all spans of class choise__block-item), get the text of clicked span using text() and set that text to the button.
$('span.choise__block-item').click(function () {
$('.switcher').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
Also can see the reference of .html().
As par my understanding your requirement is to change text of button when clicked on span.
have a look below code
$('.collapsibleContent > span').click(function(){
var clickedTxt = $(this).text();
$(this).parents('.box').find('.switcher').text(clickedTxt);
});
.box{ width:300px; float:left; border:1px solid #ff0000; margin:5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="switcher collapsible">button1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
</div>
<div class="box">
<button class="switcher collapsible">button2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text3</span>
<span class="choise__block-item">Text4</span>
<span class="choise__block-item">Text5</span>
</div>
</div>
<div class="box">
<button class="switcher collapsible">button3</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text6</span>
<span class="choise__block-item">Text7</span>
<span class="choise__block-item">Text8</span>
</div>
</div>
<div class="box">
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
</div>
You can get the list text using text() in jQuery:
$('.choise__block-item').click(function(e){
$('.switcher').text($(this).text())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
I am trying to toggle content with icon,icon is changing when i click for plus sign but it is not changing for minus again.basically i want to add plus sign for all the panel which are not open.
here is js:
$(".toggle").click(function(e) {
$( this ).find('span').toggleClass( "accordion_icon_close accordion_icon_open" );
var $next=$(this).next().toggle(400);
$('.answer').not($next).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle " profile='1' id="plus">Toggle <span class="accordion_icon_open"></span></div>
<div class="answer" rel='profile_1'>Answer</div>
<div class="toggle" profile='2'>Toggle <span class="accordion_icon_open"></span></div>
<div class="answer" rel='profile_2'>Answer</div>
Check the answer, I use fa icons, since I don't have your icon set. and just add the class you want to replace inside toggleClass()
$(document).ready(function() {
$(".toggle").click(function(e) {
$(this).find('i').toggleClass("fa-minus");
var next = $(this).next().toggle(400);
$('.answer').not(next).hide(400);
$('.toggle').not(this).find('i').removeClass('fa-minus').addClass("fa-plus");
});
});
.answer {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="toggle " profile='1' id="plus">Toggle <i class="fa fa-plus"></i> </div>
<div class="answer" rel='profile_1'>Answer</div>
<div>
<div class="container">
<div class="toggle" profile='2'>Toggle <i class="fa fa-plus"></i></div>
<div class="answer" rel='profile_2'>Answer</div>
<div>
I am trying to create a simple filter to filter elements of the DOM by color, one part of the filter works just fine, where I click the item in the list, but what I am also trying to do is to create a tag of the selected filer with small cross, which is when clicked will reset the filter back to the previous state.
Filter HTML
<div class="accordion-content">
<ul id="color-filter">
<li class="form-checkmark is-selected" data-filter="black" data-filter-type="color"><span class="label"><span class="checkbox black checkmark"></span><span class="radio-text">Black</span></span></li>
<li class="form-checkmark" data-filter="blue" data-filter-type="color"><span class="label"><span class="checkbox blue"></span><span class="radio-text">Blue</span></span></li>
<li class="form-checkmark" data-filter="brown" data-filter-type="color"><span class="label"><span class="checkbox brown"></span><span class="radio-text">Brown</span></span></li>
<li class="form-checkmark" data-filter="green" data-filter-type="color"><span class="label"><span class="checkbox green"></span><span class="radio-text">Green</span></span></li>
</ul>
</div>
HTML Elements
<div class="grid-23 material-tiles">
<div class="selected-filters">
<div class="filter-label">YOUR ACTIVE FILTERS</div>
<div class="filter-item"><span>Black</span><span class="filter-close"></span></div>
<div class="filter-item"><span>Blue</span><span class="filter-close"></span></div>
</div>
<div class="grid-3 samples" data-color="black">
<span class="sample-name">Black</span>
</div>
<div class="grid-3 samples" data-color="black">
<span class="sample-name">Black</span>
</div>
<div class="grid-3 samples" data-color="blue">
<span class="sample-name">Blue</span>
</div>
<div class="grid-3 samples" data-color="blue">
<span class="sample-name">Blue</span>
</div>
<div class="grid-3 samples" data-color="brown">
<span class="sample-name">Brown</span>
</div>
<div class="grid-3 samples" data-color="brown">
<span class="sample-name">Brown</span>
</div>
</div>
The first part .selected-filters should show the filters that were selected
The rest are just <div> with sample colors that should be displayed or hidden, depending on the selection.
So what I am trying to archive is when filter tag is closed to show back hidden color samples and remove class .checkmark and .is-selected and at the same time close the tag <div class="filter-item"><span>Black</span><span class="filter-close"></span></div>
Or if filter is clicked again then do the same as above.
So far my attempts failed as I do not know much about js and jQuery.
jQuery
function onGridChangeRequest() {
var selected = [];
$('#color-filter').find('.is-selected').each(function(i, el) {
selected.push($(this).attr('data-filter'));
})
$('.material-tiles').find('.samples').each(function(i, el) {
if(selected.length) {
if (selected.indexOf($(el).attr('data-color')) !== -1) {
$(el).show();
return;
}
$(el).hide();
return;
}
$(el).show();
})
}
$('#color-filter > li').on('click', function(e) {
var checkBox = $('.checkbox');
var filteBlock = '<div class="filter-item"><span>'+ $(this).text() +'</span><span class="filter-close"></span></div>';
$(this).toggleClass('is-selected');
$(this).find(checkBox).toggleClass('checkmark');
$('.selected-filters').css('display','block').append(filteBlock);
$('.filter-close').on('click', function () {
$(this).parent().remove();
$('#color-filter > li').find(checkBox).removeClass('checkmark');
$('#color-filter > li').removeClass('is-selected');
$('.material-tiles').find('.samples').css('display','block');
});
onGridChangeRequest();
});
Here is Fiddle
$('#color-filter > li').on('click', function (e) {
var checkBox = $('.checkbox');
$(this).toggleClass('is-selected');
$(this).find(checkBox).toggleClass('checkmark');
var color = $.trim($(this).text());
if ($(this).find(checkBox).hasClass('checkmark')) {
var filteBlock = '<div class="filter-item"><span>' + $(this).text() + '</span><span class="filter-close">X</span></div>';
$('.selected-filters').show().append(filteBlock);
} else {
$(".filter-item span:contains('" + color + "')").parent().remove();
}
if($(".selected-filters .filter-item").length<=0){
$(".selected-filters").hide();
}
onGridChangeRequest();
});
$('body').on('click', '.filter-close', function () {
$(this).parent().remove();
var color = $.trim($(this).siblings('span').text());
$('#color-filter > li .radio-text:contains("' + color + '")').trigger('click');
onGridChangeRequest();
});
function onGridChangeRequest() {
var selected = [];
$('#color-filter').find('.is-selected').each(function(i, el) {
selected.push($(this).attr('data-filter'));
})
$('.material-tiles').find('.samples').each(function(i, el) {
if(selected.length) {
if (selected.indexOf($(el).attr('data-color')) !== -1) {
$(el).show();
return;
}
$(el).hide();
return;
}
$(el).show();
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-13 filter">
<div class="filters-body">
<div class="accordion is-open">
<h3 class="accordion-header">COLOUR<span class="accordion-indicator"></span></h3>
<div class="accordion-content">
<ul id="color-filter">
<li class="form-checkmark" data-filter="black">
<span class="label">
<span class="checkbox black"></span>
<span class="radio-text">Black</span>
</span>
</li>
<li class="form-checkmark" data-filter="blue">
<span class="label">
<span class="checkbox blue"></span>
<span class="radio-text">Blue</span>
</span>
</li>
<li class="form-checkmark" data-filter="brown">
<span class="label">
<span class="checkbox brown"></span>
<span class="radio-text">Brown</span>
</span>
</li>
<li class="form-checkmark" data-filter="green">
<span class="label">
<span class="checkbox green"></span>
<span class="radio-text">Green</span>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid-23 material-tiles">
<div class="selected-filters" style="display:none">
<div class="filter-label">YOUR ACTIVE FILTERS</div>
</div>
<div class="grid-3 samples" data-color="black">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: #000;">Black</span>
</div>
<div class="grid-3 samples" data-color="black">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: #000;">Black</span>
</div>
<div class="grid-3 samples" data-color="blue">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: blue;">Blue</span>
</div>
<div class="grid-3 samples" data-color="blue">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: blue;">Blue</span>
</div>
<div class="grid-3 samples" data-color="brown">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: brown;">Brown</span>
</div>
<div class="grid-3 samples" data-color="brown">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: brown;">Brown</span>
</div>
<div class="grid-3 samples" data-color="green">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: green;">Green</span>
</div>
<div class="grid-3 samples" data-color="green">
<span class="sample-name" style="width: 100px; height:100px; display:block; margin-top:5px; background: green;">Green</span>
</div>
</div>
I have updated your fiddle now its working please have a look.
Basically there was two problems:
One is that you are not checked for condition if checkbox is not checked.
I have just checked for checkmark class i.e. $(this).find(checkBox).hasClass('checkmark') if this is true then we'll just append the filter nothing else. if it is not true then we ll remove that filter and then called your onGridChangeRequest() method which'll filter among samples.
Another one was, you need to do same logic if you removed filter directly. One thing is you are adding filter dynamically so click() event directly will not work for close filter because click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on() so used $('body').on('click', '.filter-close', function () {}. Main thing from filter we will get the color name & will trigger manually click event of li which has that color, so automatically our radio button click logic will call & you acheive same result.
One of the main selector used here is contains attribute.
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});