问题描述
|
我目前正在尝试使用FlexBox Jquery插件设置一组链接选择（这不是专门为链接而设计的，但是可以用于链接）。
如果我显式设置所有内容，则可以进行链接，但是我试图使我的代码枯竭并使它更易于理解。因此，我想出了下面的代码。
当前，所有盒子都首先加载，然后进行查询。我遇到的问题是，当我遍历菜单时（如下所示），我失去了onSelect功能-它仅对我加载的最后一个菜单触发。
我的理解是，由于我每次都使用一个不同的JQuery选择器-
$(\'#\' + fbMenu.divId)
$(document).ready(function() {
// Create the variables for data objects
var vehicleMakeFb = new Object();
var vehicleModelFb = new Object();
var vehicleTrimFb = new Object();
// Set up each menu with the divId,jsonUrl and the chlid menus that will be updated on select
vehicleMakeFb.divId = \'vehicle_vehicleMake_input\';
vehicleMakeFb.jsonUrl = \'/vehicles/getmakes\';
vehicleMakeFb.children = [vehicleModelFb];
vehicleModelFb.divId = \'vehicle_vehicleModel_input\';
vehicleModelFb.jsonUrl = \'/vehicles/getmodels\';
vehicleModelFb.children = [vehicleTrimFb];
vehicleTrimFb.divId = \'vehicle_vehicleTrim_input\';
vehicleTrimFb.jsonUrl = \'/vehicles/gettrims\';
vehicleTrimFb.children = [];
// Create an array of all menu objects so that they can be iterated through
var allMenus = [vehicleMakeFb,vehicleModelFb,vehicleTrimFb];
// Create the parent menu
for (var i = 0; i < allMenus.length; i++) {
var fbMenu = allMenus[i];
alert(fbMenu.divId);
$(\'#\' + fbMenu.divId).flexBox(fbMenu.jsonUrl + \'.json\',{
// Update the child menu(s),based on the selection of the first menu
onSelect: function() {
for (var i = 0; i < fbMenu.children.length; i++) {
var fbChild = fbMenu.children[i];
var hiddendiv = document.getElementById(fbMenu.divId + \'_hidden\');
var jsonurl1 = fbChild.jsonUrl + \'/\' + hiddendiv.getAttribute(\'value\') + \'.json\';
alert(jsonurl1);
$(\'#\' + fbChild.divId).flexBox(jsonurl1);
}
}
});
}
});
解决方法
如果您将所有信息放在它们自己的元素上，我认为您会获得更好的结果。尽管众所周知我错了，但我认为select函数的上下文变得混乱起来。
而不是将每个菜单设置为对象，请尝试：
$(document).ready(function() {
var setupdiv = (function(divId,jsonUrl,children)
{
jQuery(\'#\' + divId)
.data(\"jsonurl\",jsonUrl)
.data(\"children\",children.join(\",#\"));
// Create the parent menu
jQuery(\'#\' + divId).flexbox(jsonUrl + \'.json\',{
// Update the child menu(s),based on the selection of the first menu
onSelect: function()
{
var children = jQuery(this).data(\"children\");
var jsonUrl = jQuery(this).data(\"jsonurl\");
if(children)
{
children = jQuery(\'#\' + children);
alert(\'children was true\');
}
else
{
children = jQuery();
alert(\'children was false\');
}
var hiddendiv = jQuery(\'#\' + this.id + \'_hidden\');
children.each(function()
{
var childJsonUrl = jsonUrl + \'/\' + hiddendiv.val() + \'.json\';
alert(childJsonUrl);
$(this).flexbox(childJsonUrl);
});
}
});
});
setupdiv(\'vehicle_vehicleMake_input\',\'/vehicles/getmakes\',[\'vehicle_vehicleModel_input\']);
setupdiv(\'vehicle_vehicleModel_input\',\'/vehicles/getmodels\',[\'vehicle_vehicleTrim_input\']);
setupdiv(\'vehicle_vehicleTrim_input\',\'/vehicles/gettrims\',[]);
});