I'm probably about a 7 or 8 on proficiency with jQuery (on a scale of 1-10), so I'm not sure if this even makes sense, but I'd like to know if anyone knows of a jQuery function or possibly a plugin which allows a branch of jQuery to only be executed if a given condition is true. Otherwise, I'd love to hear if someone thinks the concept is flawed in some way (EDIT and how it is flawed)
While one could control attachment of various events using normal JavaScript syntax similar to this:
var desiredElement = $('.parent') // find the parent element
.hover(overFunction,offFunction) // attach an event while I've got the parent in 'scope'
.find('.child-element'); // then find and return the child
if (booleanVar1) { // if one condition
desiredElement.click(clickFunction1); // attach one event
} else if (booleanVar2) { // or if a different condition
desiredElement.click(clickFunction2); // attach a different event
} else { // otherwise
desiredElement.click(clickFunction3); // attach a default event
}
$('.parent').find('.other-child') // (or $('.parent .other-child')
.css(SomePredefinedCssMapping)
.hide()
//...
I was wondering if there is a way to do it all in jQuery or if there is a good reason not to... something perhaps like this:
$('.parent') // find the parent element
.hover({overFunction,offFunction}) // attach an event while I've got the parent in 'scope'
.find('.child-element') // then find the child
.when(booleanVar1) // if one condition
.click(clickFunction1) // attach one event
.orWhen(booleanVar2) // or if a different condition
.click(clickFunction2) // attach a different event
.orElse() // otherwise
.click(clickFunction3) // attach a default event
.end()
.end()
.find('.other-child')
.css(SomePredefinedCssMapping)
//...
Note: I think this is syntactically correct, assuming the booleans and functions are defined appropriately, but I'm pretty sure I've gotten the intent across pretty clearly
the proposed jQuery seems a little neater to me (??) agree/disagree? - so here are my questions:
or
condition would do it, just like the end()
method pops back the previous set after a find()
call)EDIT
The question asks how to do this with method chaining or why it would be unadvisable (specifics preferred). While it doesn't ask for alternatives, such alternatives might be necessary to explain problems with a jQuery chaining approach. Also, since the example above immediately evaluates the booleans, any other solution should do the same.
With jQuery, you can chain together actions/methods. Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
The jQuery provides another robust feature called method chaining that allows us to perform multiple action on the same set of elements, all within a single line of code. This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method.
jQuery | chaining() With jQuery, we can use do chaining which means to chain together multiple methods in a single statement on a single element. We have been using a single statement at once, but now using the chaining method we can bind multiple methods to make the code short.
Chaining is a robust technique provided by jQuery which allows us to chain together actions or methods. With jQuery chaining, we can run multiple jQuery actions or methods on the same set of elements within a single line of the statement. This technique is really neat and saves developers from lengthy code structures.
$('.parent').hover(overFunction,offFunction)
.find('.child-element')
.click( booleanVar ? clickFunction1 :
booleanVar2 ? clickFunction2 :
clickFunction3 )
.end()
.find('.other-child')
.css(SomePredefinedCssMapping)
Couldn't you perform that conditional logic within your handler?
var boolVar1 = true,
boolVar2 = false;
$(".foo").on("click", function(){
if ( boolVar1 ) clickFunction1();
if ( boolVar2 ) clickFunction2();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With