What I want to achieve is that click on dialog should alert 'color' variable defined by parent function, and only that one. Instead, if I first click on, say, RED, and then on, say, BLUE, and then on dialog 'blue', I have two alerts: 'red' and 'blue' instead of only 'blue' one.
HTML:
<div class='clickable' id='red'>RED</div>
<div class='clickable' id='green'>GREEN</div>
<div class='clickable' id='blue'>BLUE</div>
JS:
$('.clickable').on('click', function() {
var color = $(this).attr('id');
$('<div class="dialog">').html(color).dialog();
$('body').on('click', '.dialog', function() {
alert(color);
});
});
Live example. Of course, I could just save that variable and the read it, like this:
$('.clickable').on('click', function() {
var color = $(this).attr('id');
$('<div class="dialog" color="' + color + '">').html(color).dialog();
});
$('body').on('click', '.dialog', function() {
alert($(this).attr('color'));
});
but maybe there is more elegant solution?
What about something like this?
$('.clickable').on('click', function() {
var color = $(this).attr('id');
var dialog = $('<div class="dialog">');
dialog.html(color).dialog();
dialog.on('click', function() {
console.log(color);
alert(color);
});
});
EDIT:
$('.clickable').on('click', function() {
var color = $(this).attr('id');
var dialog = $('<div class="dialog">');
dialog.html(color).dialog();
dialog.on('click', (function(color) { return function() {
console.log(color);
alert(color);
}; })(color));
});
This should work will old dialogs, too.
Related
I want different things to happen to my div when clicked, depending on which class it currently has. I am changing the class of my div using jQuery. But, the first on click. Here's a simple example.
When the div's class changes, clicking it should now make it blue, but it still goes red according to the original classes function.
$('.class-1').on('click', function() {
$(this).css('background-color', 'red');
});
$('.class-2').on('click', function() {
$(this).css('background-color', 'blue');
});
$('.change-class').on('click', function() {
$('.class-1').prop('class', 'class-2');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="class-1">button</button>
<button class="change-class">change button class</button>
Can I make the function switch dynamically when the class changes?
You can apply the click() event for elements with the class class-2 using event delegation with on():
$('.class-1').on('click', function() {
$(this).css('background-color', 'red');
});
$(document).on('click', '.class-2', function() {
$(this).css('background-color', 'blue');
});
$('.change-class').on('click', function() {
$('.class-1').prop('class', 'class-2');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="class-1">button</button>
<button class="change-class">change button class</button>
You save the color as temporary variable
var myColor = 'red';
$('.class-1').on('click', function() {
$(this).css('background-color', myColor );
myColor = myColor ==='blue' ? 'red':'blue';
});
I am changing the structure of one of my projects and I am unable to figure out why my new code is not adding a class to my element.
The original code is this
(function($)
{
var $nav = $('#nav');
var $nav_a = $nav.find('a');
$nav_a.each(function()
{
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
$section.scrollex(
{
mode: 'middle',
enter: function()
{
$nav_a.removeClass('active');
$this.addClass('active');
}
});
});
})(jQuery);
My new code is this
$("#nav").find("a").each(function(){
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
$section.scrollex({
mode: "middle",
enter: function()
{
$("#nav").find("a").removeClass("active");
$(this).addClass("active");
}
})
});
The new code fails to add the class active to the elements in #nav but the original code works fine. What am I doing wrong in my new code?
You need to point to the correct this
Update from
$(this).addClass("active");
to
$this.addClass("active");
The problem with your code is that you assigned $(this) to $this, thus when you later use $(this) you are actually using $$(this).
Replace the variable in the following line:
$(this).addClass("active");
to
$this.addClass("active");
I want to click on Item1, replace the label "Item1" with "Saved", then fade out the button after 500ms and place back the label "Item1" (saved in var currentText)
If I click the button multiple times it fires too many times. How can I prevent that?
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
This could be solved with a simple flag indicating that you are in the process of fading it out.
var isFadingOut = false;
$('body').on('click', ".item", function() {
if (isFadingOut) {
return;
}
isFadingOut = true;
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
isFadingOut = false;
});
});
Note: this solution works globally. So if you have multiple different buttons on screen that you want to be able to fade out simultaneously, this will not work. If that's the case, something more like what #Phiter wrote would be better.
I'd do something like this:
$('body').on('click', ".item", function() {
if ($(this).data('off')) return;
$(this).data('off', true);
var currentText = $(this).text();
$(this).text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
$(this).data('off', false);
});
});
The function will not execute while the button has the off data. Kinda like Mike's answer but without the global variable.
Can use not(':animated'). The :animated pseudo selector is used internally by jQuery and is only active when an animation is in progress
$('body').on('click', ".item", function() {
var currentText = $(this).text();
$(this).not(':animated').text('Saved!').delay(500).fadeOut("fast", function() {
$(this).text(currentText).css('display', '');
});
});
I am trying to replace the calendar icon which is on right side of header,based on item we selected from the menu elements.
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});
Please check full code here
You can do it like this
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
classI= $(this).find("i").attr('class');
$("#chicon i").attr("class",classI+" pull-right");
});
});
Here is working example http://codepen.io/anon/pen/ALWRww
You can write it like this:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var text = $(this).attr('class');
var icon = $(this).find('i').attr('class');
var newClass = icon + ' pull-right';
$("#title").text(text);
$('#chicon i').removeClass();
$('#chicon i').addClass(newClass);
});
});
This will change your icon and text
$(document).ready(function() {
var oldicon = "fa fa-calendar-check-o";
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var newicon = $(this).find("i").attr("class");
$("#chicon i").removeClass(oldicon).addClass(newicon);
oldicon = newicon;
});
});
I have done minor change script as below:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var icon_class=$(this).find('i').attr('class');
$("#chicon").find('i').attr('class',icon_class+' pull-right');
});
});
I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)
The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.
$(document).ready(function () {
$('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$("subnav_holster li a").css({
"color": "red"
});
});
});
Grab the li that was clicked and access that element's a:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
var clicked = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
clicked.find('a').css({
"color": "red"
});
});
});
You should cache this and then highlight it:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$('.subnav_holster li a').css({
"background-color": "white" // reset all to default color
});
$this.find('a').css({
"background-color": "red" // set highlight to this element only
});
});
});