I'm trying to create multiple divs that can be closed with the click of a button. Being a novice at jquery, I'm sure there are better ways to do this.
My question is:
Are there better ways to do this?
EDIT: Is there a way to only have one div open and cancel out and already open one in the case a user does not close it??
//hidden divs
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
});
});
$(document).ready(function () {
$(".x").click(function () {
$("#bazinga_content").hide();
});
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("600", function () {});
});
$("#bazinga").click(function () {
$("#bazinga_content").show("600", function () {});
});
Here's my fiddle: http://jsfiddle.net/0t6uqwLm/13/
You can close multiple divs in a click event like this
$(document).ready(function () {
$(".x").click(function () {
$("#bazinga_content").hide();
$("#tcm_content").hide();
});
});
And you dont need to use multiple document.ready functions. You can actually use one document.ready and put everything into it.
Working JsFiddle here https://jsfiddle.net/0t6uqwLm/10/
New JsFiddle for the update made in question https://jsfiddle.net/0t6uqwLm/12/
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
$("#bazinga_content").hide();
});
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("slow");
});
$("#bazinga").click(function () {
$("#bazinga_content").show("slow");
});
Everything should go into the ready function, and you only need one click handler for the x class
$(document).ready(function () {
$(".x").click(function () {
$("#tcm_content").hide();
$("#bazinga_content").hide();
});
//thumbnails
$("#tcm").click(function () {
$("#tcm_content").show("600", function () {});
});
$("#bazinga").click(function () {
$("#bazinga_content").show("600", function () {});
});
});
As to what is better, this is a perfectly acceptable way to show and hide div's using jQuery.
To clarify, jQuery uses selectors to get at the specific elements on the page that you want. When you call $("#tcm").click... jQuery goes looking for that element with the id="tcm". If it has not loaded into the DOM yet, there will be no element to attach the click event to. That is why they should go into the ready function, because it does not get called until the document has loaded all of the elements.
Related
I use this script to change a class:
$('.fa.fa-plus-circle').each(function() {
$(this).on('click', function () {
$(this).removeClass().addClass("fa fa-minus-circle");
});
});
Then I used
$('.fa.fa-minus-circle').each(function () {
$(this).on('click', function () {
$(this).removeClass().addClass("fa fa-plus-circle");
});
});
So for the first one "fa.fa-plus-circle" that is the default when the page is loading, everything is good and the class changes. But when the class changes I can't do anything else after, JQuery continues to execute
$('.fa.fa-plus-circle').each(function() {
$(this).on('click', function () {
$(this).removeClass().addClass("fa fa-minus-circle");
});
});
Why ??
Thanks in advance
You need to use delegate for this, because you are adding the classes dynamically.
$(document).on("click", '.fa.fa-minus-circle', function() {
$(this).removeClass().addClass("fa fa-plus-circle");
});
$(document).on("click", '.fa.fa-plus-circle', function() {
$(this).removeClass().addClass("fa fa-minus-circle");
});
Also there is no need for looping through the elements for binding the event.
But the recommended approach will be,
$('.fa').click(function() {
$(this).toggleClass("fa-minus-circle fa-plus-circle");
});
Edit
$(document).on("click", ".fa", function() {
$(this).toggleClass("fa-minus-circle fa-plus-circle");
});
It's not .fa-minus-circle when it loads, so the each loop never happens. Even if you removed the each loop (which isn't required) it wouldn't add the listeners because it wouldn't find the selector. So, you have to use the delegates version of on which looks something like this...
$('body').on('click','.fa-minus-circle',function () {
$(this).removeClass().addClass("fa fa-minus-circle");
});
fwiw, you could just use one class and toggleClass Then put all your fa-plus-circle code into the fa class since that is the default behavior.
$('body').on('click','.fa',function () {
$(this).toggleClass("fa-minus-circle");
});
There's a benefit to not removing all classes. There seems no point to removing .fa so that you can add it. Which means that your code should be:
$(function() {
$(document).on("click", '.fa.fa-minus-circle', function() {
$(this).removeClass('fa-minus-circle').addClass("fa-plus-circle");
});
$(document).on("click", '.fa.fa-plus-circle', function() {
$(this).removeClass('fa-plus-circle').addClass("fa-minus-circle");
});
});
And as #AnoopJoshi has pointed out, you can use the .toggleClass() method:
$(function() {
$('.fa').on('click', function() {
$(this).toggleClass('fa-minus-circle fa-plus-circle');
});
});
I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
document.getElementById('#featuresModal1').style.display="none";
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
document.getElementById('#featuresModal2').style.display="none";
});
});
However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.
I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?
Try use .one function instead of .on. When you use .on() your callback would be repeating again and again, beacuse you bind it again for each click;
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').one('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').one('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
});
});
Don't bind hidden.bs.modal again and again on modal click, just bind it once like,
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
});
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
$(this).hide();// you can use hide function
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
});
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
$(this).hide();
});
Alternatively, you can try
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide'); // hide first
$('#featuresModal2').modal('show'); // show second
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal3').modal('show');
});
For my website I allow the user to use a drop down to select various options, when they choose an option i have some jquery that should hide or show different pictures according to what they choose. However it doesn't seem to be changing.
I have created a js fiddle and put some text in on the cook section to try and test it but it still isn't working. Can anyone see why?
http://jsfiddle.net/av7E2/
$(document).ready(function () {
$('.box').hide();
$('#option1').show();
$('#select-portion').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.prepBox').hide();
$('#option10').show();
$('#select-prep-time').change(function () {
$('.prepBox').hide();
$('#'+$(this).val()).show();
});
});
$(document).ready(function () {
$('.cookBox').hide();
$('#cook1').show();
$('#select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
});
Going by your fiddle, select-cook-time is a class and not an id value. Hence you should be using .select-cook-time instead. Try this
$('.select-cook-time').change(function () {
$('.cookBox').hide();
$('#'+$(this).val()).show();
});
I looked at your fiddle. You are using #select-portion when you should be using .select-portion. You seem to have the same problem with all other dropdowns.
Apply this changes and change handlers will be invoked.
$('#select-cook-time') -> $('.select-cook-time')
$('#select-prep-time') -> $('.select-prep-time')
$('#select-portion') -> $('.select-portion')
Well in your fiddle, you have class="select-portion" and in the jquery you are looking for # not .
After cleaning up some of the typos in the markup and cleaning up the jQuery we get this -
$(document).ready(function () { // one document ready handler (although you can use as many as you'd like, this is just cleaner)
$('.box, .prepBox, .cookBox').hide(); // combine selectors
$('#option1, #option10, #cook1').show(); // combine selectors
$('.select-portion').change(function () { // change to class selector
$('.box').hide();
$('#' + $(this).val()).show();
});
$('.select-prep-time').change(function () { // change to class selector
$('.prepBox').hide();
$('#' + $(this).val()).show();
});
$('.select-cook-time').change(function () { // change to class selector
$('.cookBox').hide();
$('#' + $(this).val()).show();
});
});
You can see this in operation here - http://jsfiddle.net/jayblanchard/av7E2/1/
I've nearly this code for defining the plugin instance:
$.fn.someplugin = function(opts) {
$(document).on('click', '.option-1', function() {
alert(1);
});
};
I use some code like this one to make my plugin work:
$('.selector-1').someplugin();
So jQuery in this way binds likely one click event listener to the document.
The question is, when I use my plugin multiple times, does it mean that jQuery binds 10 click events to the document?
$('.selector-1').someplugin();
$('.selector-2').someplugin();
$('.selector-3').someplugin();
$('.selector-4').someplugin();
$('.selector-5').someplugin();
$('.selector-6').someplugin();
$('.selector-7').someplugin();
$('.selector-8').someplugin();
$('.selector-9').someplugin();
$('.selector-10').someplugin();
In this way it binds 10 click listeners - because fn.someplugin is called 10 times, or just one?
Yes, it binds 10 click listeners to the $(document) object.
Every time you call someplugin() it will bind a new listener.
JSFIDDLE
If you want to add a single click handler to the document (inside of your plugin) you can do this:
(function ($) {
$.fn.someplugin = function(opts) {
alert("Another someplugin call.");
};
$(document).on('click', '.option-1', function() {
alert(1);
});
})($);
JSFIDDLE
You can do this to bind only one time :
(function ($) {
$.fn.someplugin = function (opts) {
return $(this).each(function (index, value) {
$(document)
.off('click', '.option-1')
.on('click', '.option-1', function (event) {
event.preventDefault();
alert(1);
});
});
};
})(jQuery);
$(document).ready(function () {
$('.selector-1, .selector-2').someplugin();
});
$(this).each allows you to bind multiple selectors.
.off() unbinds the event if it exists.
jsfiddle : http://jsfiddle.net/rWYS4/
Its possible to clear jquery one property? for example given html
<div id="button">button</div>
<div id="clearOneProperty">clear one property</div>
and js
$("#button").one("click", function () {
alert("blah");
});
$("#clearOneProperty").on("click", function () {
// clear "one" property, that is after this event, I want "#button" to work again
});
Demo http://jsfiddle.net/RzzCu/2/
So, if click #button div, alert happened only one times right?
And I want that, at click on #clearOneProperty, reset one property. Its possible?
P.S. I am not asking how to make this with other ways, I am interest exact: "possible clear jquery one method?". Thanks.
Try this:
function bindButton() {
$("#button").unbind('click').one("click", function() {
alert("blah");
});
}
bindButton();
$("#clearOneProperty").on("click", function() {
bindButton();
});
Updated fiddle
The one unbinds its self on first invocation as stated "The first form of this method is identical to .bind(), except that the handler is unbound after its first invocation", jQuery Documentation *So you need to bind it again*.
Live Demo
$("#button").one("click", onefunction);
function onefunction() {
alert("blah");
}
$("#clearOneProperty").one("click", function() {
$("#button").one("click", onefunction);
});
Just rebind it inside the function.
$("#button").one("click", function () {
alert("blah");
});
$("#clearOneProperty").one("click", function () {
$('#button').one("click", function () {
alert("blah");
});
});
here a fiddle
Use unbind() method
$("#button").unbind();
Try
$('#button').unbind('click');