Question

以下是我的第一部分代码：

$('ul li').click(function(){ //when an <li> is clicked

    $('ul .clicked').removeClass('clicked'); // remove .clicked class from any other <li>'s inside a <ul>
    $(this).addClass('clicked'); // add .clicked class to the clicked <li> ($(this))

    screen = $(this).attr('id'); // screen = the clicked elements' id
    screen = "#" + screen; // screen = the clicked elements' id with a # infront of it 
    $(screen).screenSlide(); // is basically = $('#elementsID').screenSlide();, correct?
});

这很奇怪，因为在我写的前一个函数中，我做了完全相同的事情，除了最后一步，而不是将屏幕作为选择器，我将屏幕推入数组，然后我抓住数组[0]（这是#elementsID没有任何引用）并将其用作选择器并且工作正常。但是继续前进，screenSlide是

function screenSlide(){ // $(this) should = an <li> who's id is screen
    var test = $(this).attr('class');
    alert(test);
    $(this).addClass('current'); // add the .current class to $(this), which should be an <li>
    $(this).slideDown();
};

现在，警报测试没有提醒任何东西，所以我猜测将屏幕作为CSS选择器传递不起作用。如您所见，screenSlide函数应该向$（this）＆lt; li>然后让它向上滑动。

对于什么是错的任何想法？

Answer 1

你定义它的方式，screenSlide只是一个函数，没有附加到jquery对象。为了在jquery对象上作为函数调用，您需要将其添加为$.fn.screenSlide。

$.fn.screenSlide = function(){
    var test =this.attr('class');
    alert(test);
    this.addClass('current'); // add the .current class to $(this), which should be an <li>
    this.slideDown();
    return this; //return this to enable chaining
}

在这个函数中你不需要将jquery对象重新定义为$（this），因为它已经是一个jquery对象，并且还返回this来启用链接。

如果您想单独调用它，则可以使用function.call

screenSlide.call($(this));

这个this再次成为jquery对象，你不需要再次在函数内部$(this)。

顺便说一句，您似乎只需要将其作为$(this).screenSlide();调用，除非您复制了ID，在这种情况下它将不会按照您期望的方式运行。 < / p>

<强> Demo

Answer 2

$(screen).screenSlide();将抛出一个错误，指出对象没有screenSlide这样的方法，因为screenSlide不是与jQuery包装器对象关联的方法。您需要将screenSlide写为

的插件

$.fn.screenSlide = function(){
    var test = this.attr('class');
    alert(test);
    this.addClass('current'); // add the .current class to $(this), which should be an <li>
    this.slideDown();
}

或使用自定义上下文调用screenSlide，例如

screenSlide.call($(screen))

传递变量作为JQuery CSS选择器无法正常工作

2 个答案: