Save a reference to a particular selector
Ok, what I am after is quite simple. I have click handler for multiple radio group sets. Inside the handler I am passing some parameters to a functions parameters references are relative to the group set but their path are the same. So I basically have:
$(document).ready(function(){
$("input[name='radioGroup1']").click(function(){
updateWalletInfo(
$(this).val(),
$(this).parent().parent().find(".cSec .f_class a").text(),
$(t开发者_如何学Gohis).parent().parent().parent().find(".cSec .flight-time").text(),
$(this).parent().parent().parent().find(".cSec .city").text(),
);
});
$("input[name='radioGroup2']").click(function(){
updateWalletInfo(
$(this).val(),
$(this).parent().parent().find(".cSec .f_class a").text(),
$(this).parent().parent().parent().find(".cSec .flight-time").text(),
$(this).parent().parent().parent().find(".cSec .city").text(),
);
});
});
What I want to do is to save reference to particular item under $(document).ready()
so if I change the path I wouldn't have to change it in each handler. Like what I am after is like:
$(document).ready(function(){
var value = $(this).val();
var f_class = $(this).parent().parent().find(".cSec .f_class a").text();
var f_time =$(this).parent().parent().parent().find(".cSec .flight-time").text();
var f_city = $(this).parent().parent().parent().find(".cSec .city").text();
$("input[name='radioGroup1']").click(function(){
updateWalletInfo(value,f_class,f_time,f_city);
});
$("input[name='radioGroup2']").click(function(){
updateWalletInfo(value,f_class,f_time,f_city);
});
});
I know the this operator will not work there, but I thought that makes my point more clear. I am even happy if I could only remove the redundancy for .parent().parent().find(".cSec .????").text()
bit.
You can replace parent().parent().
with closest().
.
Also pass a reference to the jQuery element to the updateWalletInfo function and get all the values inside that function, rather than passing all values. Something like
$(document).ready(function(){
$("input[name='radioGroup1']").click(function(){
updateWalletInfo($(this));
});
$("input[name='radioGroup2']").click(function(){
updateWalletInfo($(this));
);
});
function updateWalletInfo(elem)
{
var value = elem.val();
var f_class = elem.closest("selector").find(".cSec .f_class a").text();
var f_time = elem.closest("selector").find(".cSec .flight-time").text();
var f_city = elem.closest("selector").find(".cSec .city").text();
}
});
If you are taking all the values from the same parent element then you can take
var parentElem = elem.closest("selector");
var f_class = parentElem.find(".cSec .f_class a").text();
var f_time = parentElem.find(".cSec .flight-time").text();
var f_city = parentElem.find(".cSec .city").text();
You could register an impromptu jQuery plugin function.
$.fn.registerMyClick = function() {
$(this).each(function() {
var $this = $(this);
$this.click(function() {
updateWalletInfo(
$this.val(),
$this.parent().parent().find(".cSec .f_class a").text(),
$this.parent().parent().parent().find(".cSec .flight-time").text(),
$this.parent().parent().parent().find(".cSec .city").text(),
);
});
});
return this;
}
Depending on your HTML, it could also be simplified as:
$.fn.registerMyClick = function() {
$(this).each(function() {
var $this = $(this);
$this.click(function() {
$parent = $this.closest('.cSec');
updateWalletInfo(
$this.val(),
$(".f_class a", $parent).text(),
$(".flight-time, $parent").text(),
$(".city", $parent).text(),
);
});
});
return this;
}
Then you use it like this:
$("input[name='radioGroup1']").registerMyClick();
$("input[name='radioGroup2']").registerMyClick();
精彩评论