将 jquery 选择器传递给插件中的子函数答案

【问题标题】：Passing jquery selector to sub-function within a plugin将 jquery 选择器传递给插件中的子函数
【发布时间】：2009-02-12 14:03:58
【问题描述】：

我正在尝试制作一个快速的 jquery 插件（作为学习练习），用于从项目列表（在本例中为 LI）制作一个简单的寻呼机，并且在将当前选择器（this）传递给时遇到了问题一个子功能。代码如下。

问题是在创建动态导航（插件需要 jquery 1.3）时，我需要传递选择器，因为它是构成寻呼机的实际显示/隐藏的子功能。我正在尝试以下方法

var selector = $(this);

获取选择器，然后将其传递给脚本底部的子函数，如下所示

$(".pageNav a").live("click", function(selector) {

并希望在子函数中使用选择器如下

$(selector).hide();

但我什么也得不到。任何建议将不胜感激，无需为我完成插件！

谢谢

(function($) {
$.fn.quickPager = function() {

    //edit this
    var pageSize = 10;
    //leave this
    var selector = $(this);
    var totalRecords = $(this).length;
    var currentPage = 1;
    var pageCounter = 1;

    $(this).each(function(i){
        if(i < pageCounter*pageSize && i >= (pageCounter-1)*pageSize) {
            $(this).addClass("page"+pageCounter);
        }
        else {
            $(this).addClass("page"+(pageCounter+1));
            pageCounter ++;
        }   
    });

    //show/hide the appropriate regions 
    $(this).hide();
    $(".page"+currentPage).show();

    //first check if there is more than one page. If so, build nav
    if(pageCounter > 1) {

        //Build pager navigation
        var pageNav = "<ul class='pageNav'>";   
        for (i=1;i<=pageCounter;i++){

            if (i==1) {
                pageNav += "<li class=currentPage pageNav"+i+"'><a rel='"+i+"' href='#'>Page "+i+"</a></li>";   
            }
            else {
                pageNav += "<li class='pageNav"+i+"'><a rel='"+i+"' href='#'>Page "+i+"</a></li>";
            }

        }
        pageNav += "</ul>";
        $("#pagerContainer").append(pageNav);

        //pager navigation behaviour
        $(".pageNav a").live("click", function(selector) {          
            //grab the REL attribute 
            var clickedLink = $(this).attr("rel");
            currentPage = clickedLink;
            //remove current current (!) page
            $("li.currentPage").removeClass("currentPage");
            //Add current page highlighting
            $(this).parent("li").addClass("currentPage");
            //hide and show relevant links
            //$("ul.paging li").text("TEST");
            $(selector).hide();
            $(selector+".page"+clickedLink).show();
            return false;
        });

    }



}
})(jQuery);

【问题讨论】：

标签： javascript jquery function jquery-plugins

【解决方案1】：

var selector = $(this);
$(".pageNav a").live("click", function() {
  // do something
  selector.hide();
});

【讨论】：

完美！你知道这条线可以做什么吗.. $(selector+".page"+clickedLink).show(); （用于显示功能）。选择器+".page"+clickedLink.show();不起作用（我想你知道）谢谢！

【解决方案2】：

改变

$(selector+".page"+clickedLink).show();

到

selector.find(".page"+clickedLink).show();

selector 不是字符串，它是一个 jQuery 对象，其中包含插件理解为 this

的所有元素

【讨论】：

这不起作用 - 很抱歉继续回来，但希望这可以帮助将来搜索类似问题的人 - 测试页面位于 allbutlost.com/test/simplepager，您还有其他想法吗？丹

【解决方案3】：

似乎缺少的链接是

selector.parent().find(".page"+clickedLink).show();

感谢夸克的宝贵帮助。

【讨论】：