I have a button I want to refer back to inside of an if statement, so I can target an element inside of the button's sibling.
$(function() {
$('button').click(function() {
var clickedbtn = $(this);
if (clickedbtn.closest('.container-destination').find('.slider-display').hasClass('open')) {
alert('it is open already');
}
else if (clickedbtn.closest('.container-destination').find('.slider-display').hasClass('closed')) {
alert('it is closed');
$('.slider-display.open').slideUp();
$('.slider-display.open').addClass('closed');
$('.slider-display.open').removeClass('open');
clickedbtn.closest('container-destination').find('slider-display').addClass('open');
clickedbtn.closest('container-destination').find('slider-display').slideDown();
}
});
});
You already refer back to the button several times and assigned it to a variable in this line:
var clickedbtn = $(this);
Therefore you can refer to the button using clickedbtn
You need to define the variable outside of the event then assign the clicked instance to the variable inside it like :
$(function() {
var clickedbtn;
$('button').click(function() {
clickedbtn = $(this);
var sliderDisplay = clickedbtn.closest('.container-destination').find('.slider-display');
if ( sliderDisplay.hasClass('open') ) {
alert('it is open already');
} else if ( sliderDisplay.hasClass('closed') ) {
alert('it is closed');
$('.slider-display.open').slideUp().addClass('closed').removeClass('open');
sliderDisplay.addClass('open').slideDown();
}
});
});
Related
I'm trying to do a specific action on the clicked element if an argument is passed in the on click method in jQuery. When I try to access this it's referencing the entire window instead of the clicked on element. How would I access the clicked on element in the handler?
Here's the code I'm using:
var myfunction = function(action) {
var content;
var $this = $(this);
if(action === "one") {
$(".output").text("clicked on one");
$this.addClass("one");
}
if(action === "two") {
$(".output").text("clicked on two");
$this.addClass("two");
}
};
$("#button").on("click", function(event) {
myfunction("one");
});
$("#button2").on("click", function(event) {
myfunction("two");
});
I set up an example on jsbin here. Any help would be appreciated.
There are several ways to do this.
JQUERY WAY:
Within your jquery click event handlers you have the event object. It has a property called target which is what you're looking for.
Change this: $this.addClass("one");
To this: $(event.target).addClass("one");
You can also do this: event.target.className = "one"
And do for "two" as well obviously...
VANILLA WAY:
You can just pass in an extra argument representing your clicked element.
var myfunction = function(action, element) {
var content;
if(action === "one") {
$(".output").text("clicked on one");
$(element).addClass("one");
// or event.target.className = "one"
}
if(action === "two") {
$(".output").text("clicked on two");
$(element).addClass("two");
// or event.target.className = "two"
}
};
$("#button").on("click", function(event) {
myfunction("one", this);
});
$("#button2").on("click", function(event) {
myfunction("two", this);
});
You can use Function.prototype.call:
$("#button2").on("click", function(event) {
myfunction.call(this, "two");
});
or store the action as an attribute on your element, bind your handler directly and query the attribute.
var myfunction = function() {
var content;
var $this = $(this);
var action = $this.attr('data-action');
if (action === "one") {
$(".output").text("clicked on one");
$this.addClass("one");
} else if (action === "two") {
$(".output").text("clicked on two");
$this.addClass("two");
}
};
$("#button2").on("click", myfunction);
this refers to the object the function belongs to, in your case the function belongs to the window object or global object, the 'this' keyword behaves differently depending on how you use your function, if you use it as a constructor function for example (with the new keyword) 'this' will be bound to new object being constructed, and when the function is used as an event handler this will be set to the event the element the event fired from.
see :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this for more information.
you need to change your code and do something like this:
$(".button").on("click",function(){
var $this = $(this) //refers to the event it was fired from (button object)
$(".output").text("You clicked on "+$this.text());
});
i used classes instead of ids to target any button that's clicked
an example in jsfiddle: http://jsfiddle.net/fvacbd9u/
How can I target only one container?
The User should be able to change the Name and then confirm the change.
My function works fine but when I have more containers repeated and I confirm Its changing all the tags!
Please check the demo where you can also see the changeElementTypefunction
Demo:
http://jsfiddle.net/26qNq/1/
JS:
$('.replace').on('click', function (){
$("h2").changeElementType("textarea");
$(this).hide();
$(this).next('a').show();
$('.confirm').on('click', function(){
var $textarea = $('textarea');
$(this).hide();
$(this).prev('a').show();
$textarea.html($textarea.val()).changeElementType("h2");
});
if ($('textarea:visible')){
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity','1');
}
});
}
});
You need to identify the relevant h2/textarea
var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");
and
var container = $(this).closest('.rename')
var $textarea = container.find('textarea');
You also should nest your handler binding because each time your try to edit, you add a new handler
Full changes
$(document).keypress(function (e) {
if ($('textarea:visible')) {
if (e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity', '1');
}
}
});
$('.replace').on('click', function () {
var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");
$(this).hide();
$(this).next('a').show();
});
$('.confirm').on('click', function () {
var container = $(this).closest('.rename')
var $textarea = container.find('textarea');
$(this).hide();
$(this).prev('a').show();
$textarea.html($textarea.val()).changeElementType("h2");
});
Demo at http://jsfiddle.net/26qNq/6/
Adding an ID to each of them seems to work.
All I needed to do was add a numeric ID to each element we were using and add this to your replace code:
var id = $(this).attr('id');
$("h2#" + id).changeElementType("textarea");
demo: http://jsfiddle.net/26qNq/12/
I have a function that needs to fire when I click on a chevron tab. However I only need that function to fire that first time we load the page. How can I prevent it form firing every time the tab is clicked?
$('#navi a').bind('click',function(e){
var $this = $(this);
var prevButton = current;
$this.closest('ul').find('li').removeClass('selected');
if ( $(this).attr('id') == 'tab2')
{
//fire function only once
}
});
In case you need only part of your event handler to run once :
$("div").on("click",function(){
if (!$(this).data("fired")) {
console.log("Running once");
$(this).data("fired",true);
}
console.log("Things as usual");
});
Demo
Use the .one binding instead. This will attach it to fire on the first click and remove itself.
Use:
var isalreadyclicked=false;
$('#navi a').bind('click',function(e){
var $this = $(this);
var prevButton = current;
$this.closest('ul').find('li').removeClass('selected');
if ( $(this).attr('id') == 'tab2')
{
if(!isalreadyclicked){
//fire function only once
isalreadyclicked=true;
}
}
});
Can someone help me out with the following code? Can't get it right.
I want it to close opens toggle when clicking on new/other one.
I have this at the moment:
http://jsfiddle.net/78tDj/1/
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle').each(function(){
$(this).find('.toggle-content').hide();
});
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End
is this what you want to achieve?
jQuery(document).ready(function($) {
// Find the toggles and hide their content
$('.toggle-content').hide();
// When a toggle is clicked (activated) show their content
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle-content').hide();
if( el.hasClass('active') )
{
parent.find('.toggle-content').slideToggle();
el.removeClass('active');
}
else
{
parent.find('.toggle-content').slideToggle();
el.addClass('active');
}
return false;
});
}); //End
You need to hide them in your click handler:
$('.toggle a.toggle-trigger').click(function(){
var el = $(this), parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp(); // <- added this!!!!
//...
jsFiddle
No need to call each, it's redundant. Also, simply hide all toggles before opening a new one ..done :-)
$('.toggle a.toggle-trigger').click(function() {
var el = $(this),
parent = el.closest('.toggle');
$('.toggle .toggle-content').slideUp();
if (!el.hasClass('active')) {
$('.toggle a.toggle-trigger').removeClass('active');
el.addClass('active');
parent.find('.toggle-content').slideDown();
}
else {
el.removeClass('active');
}
});
http://jsfiddle.net/78tDj/10/
My Scenerio:
I have a function:
The function Addprocedure() is called on onclick of Addprocedure button.
In this function i want to check if btnAddSelectedProcedures is clicked then do Something else do nothing
function Addprocedure(){
if()// Check if Button is clicked, button id = `btnAddSelectedProcedures`
{
//Do Something
}
else{
//Do nothing
}
}
Save the state of the button in a variable.
Define btnClicked globally as false. When btnAddSelectedProcedures is clicked, change btnClicked to true. When you call Addprocedure check if btnClicked variable is true and if so, that button has been clicked.
Example:
var btnClicked = false;
function Addprocedure() {
if (btnClicked) {
//Do something...
} else {
//Do something else...
}
}
$('BUTTON[name="btnAddSelectedProcedures"]').click(function() {
btnClicked = true;
});
$('BUTTON[name="Addprocedure"]').click(function() {
Addprocedure();
});
Try
$('#btnAddSelectedProcedures').click(function(){
$(this).data('clicked', true)
})
then
function Addprocedure(){
if($('#btnAddSelectedProcedures').data('clicked')){
//clicked
} else {
//not clicked
}
}
It is simple, check id
function Addprocedure(){
if(this.id === 'btnAddSelectedProcedures')// Check if Button is clicked, button id = `btnAddSelectedProcedures`
{
//Do Something
}
else{
//Do nothing
}
}
One possiblity,
You can declare a global variable and mark it as true when yourbtnAddSelectedProcedures clicked and use that to check in your Addprocedure() function.
var isButton1Clicked =false;
onButton1Click{
isButton1Clicked ==true
}
onButton2Click{
if(isButton1Clicked){
//procedd
}
}
I suggest to avoid using global var. Use a class instead ( or You can set data-* attribute as well )
$('#btnAddSelectedProcedures').on('click', function(){
//$(this).toggleClass('clicked');
if(! $(this).hasClass('clicked') ){ //allows you to set only once the class
$(this).addClass('clicked');
}
Addprocedure();
});
then
function Addprocedure(){
if( $("#btnAddSelectedProcedures").hasClass('clicked') ) //I guess you can call $(this) too
{
//Do Something
}
else{
//Do nothing
}
}
I used toggleClass because I think you want to check every time if the user clicked .
Use addClass in the other way.
<button id="1" onClick="Addprocedure(this.id)">B1</button>
and then
function Addprocedure(clicked_id)
{
alert(clicked_id);
}