使用JQuery来选择一个基于URL的动态ID

我在这种类型的场景提供的各种答案环顾了很多（几个小时），但我不是一个程序员，所以我得到卡在可能很简单的事情上。情况如下：我有一个jQuery动态菜单（基于jquery lava lamp menu），它根据页面上的项目ID定位导航图像。此ID与URL的最后部分相匹配，在URL之前插入“primary-menu-”字样。所以，我有：使用JQuery来选择一个基于URL的动态ID

example.com/blog 
example.com/about

用于上述网址列表项导航元件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),

我设法得到这种动态菜单上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);

来源

2012-01-22 rosslaird

你如何告诉我们你实际上想要做什么？ – Sinetheta

你甚至不必解析URL。你可以只使用一个属性选择器选择任何元素的ID开始与primary-menu-：

var currentPageItem = $(this).find('[id^="primary-menu-"]');

如果你绝对必须使用的网址，使用：

var id = window.location.href.split('#')[0].split('?')[0].split('/').pop(), 
    currentPageItem = $(this).find('#primary-menu-' + url);

来源

2012-01-22 18:50:04

对于添加动态内容，它仍不会做任何事情。直到他揭示他对这个选择者的计划是什么，我们不能开始不可避免的“omg use .live（）”“omg .live（）被depracated”讨论;） – Sinetheta

感谢您的反馈。我想要做的是选择（动态）ID。而已。当我使用诸如“selected”之类的静态ID时，jquery代码完美地工作：它在导航链接列表上滑动图像并返回以确定“选定”。我改变的唯一的东西就是它选择的东西。 – rosslaird

您可以提高你的代码喜欢这个。

var url = 'example.com/blog'; 
var id = url.split('/').pop(); 
var nav = $(this), 
currentPageItem = $("#primary-menu-" + id, nav);

来源

2012-01-22 18:52:30 ShankarSangoli

使用'url.split（'/'）.pop（）'而不是'url.split（'/'）。reverse（）[0]'。 –

@JosephSilber - 谢谢你完全忘了：P – ShankarSangoli

使用JQuery来选择一个基于URL的动态ID

回答

相关问题