【发布时间】：2012-01-22 18:44:39
【问题描述】：
我已经环顾了很多（现在几个小时）为这种场景提供的各种答案，但我不是程序员，所以我被困在可能非常简单的问题上。情况如下：我有一个 jquery 动态菜单（基于 jquery lava lamp menu），它根据页面上项目的 ID 定位导航图像。此 ID 与 URL 的最后一部分相匹配，在 URL 之前插入单词“primary-menu-”。所以，我有：
example.com/blog
example.com/about
上述 URL 的列表项导航元素的 ID 是：
id="primary-menu-blog"
id="primary-menu-about"
我必须选择这些动态项目的（截断的）Jquery 代码（我从类似问题的各种答案中复制了这些代码）是：
var url = '/';
var id = parseInt(url.split('/')[url.split('/').length - 1]);
var nav = $(this),
currentPageItem = $("#primary-menu-" + id, nav),
我已经设法让这个动态菜单在没有动态变化 ID 的 sample page 上运行。但很自然地，它不适用于新代码，因为我对此知之甚少。但我认为我走在正确的轨道上。欢迎提出建议。
编辑：在尝试在此线程中实施建议后，没有成功，我想我一定错过了一些简单的东西。所以，为了清楚起见，这里是完整的脚本（不是那么长......）：
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 0,
speed : 500,
reset : 1500,
color : 'none',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
# Added by Me, for testing on localhost;
var url = 'localhost:8000/';
var id = url.split('/').pop();
# End Added by Me.
var nav = $(this),
currentPageItem = $("#primary-menu-" + id, nav),
blob,
reset;
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
}); // end each
};
})(jQuery);
【问题讨论】：
-
你告诉我们你真正想要做什么。