将变量作为 JQuery CSS 选择器传递不起作用

Posted 2023-03-05

【中文标题】将变量作为 JQuery CSS 选择器传递不起作用

【英文标题】：passing variable as JQuery CSS selector not working

【发布时间】：2013-10-17 15:19:16

【问题描述】：

这是我的第一部分代码：

$('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?
);

这很奇怪，因为在我编写的前一个函数中，除了最后一步之外，我做了完全相同的事情，而不是将 screen 作为选择器传递，我将 screen 推入一个 Array 中，然后我抓取了 array[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)

添加一个类，然后让它向上滑动。

有什么问题吗？

【问题讨论】：

你的意思是警告框显示undefined，还是根本不显示？另外，控制台有错误吗？

你为什么不直接打电话给screenSlide(this);？

@SuperScript ，当我这样做时，警告框显示未定义。

你在复制 id 吗？

@PSL ，完美，工作！不，我没有复制 ID，你是对的，我可以直接向下 screenSlide(this);

【参考方案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，在这种情况下，它的行为无论如何都不会像您预期的那样。

Demo

【参考方案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))

【讨论】：

嗯，很有趣。那么如何使 screenSlide 成为与 JQuery 包装器对象关联的方法呢？

@user2817200 如果你把它写成上面给出的插件，它将与 jQuery 包装器对象相关联