javascript - 无法间接执行 JQuery 函数

Question

我认为该标题非常不准确，因此请为我建议一个适合该问题的标题。

我的网页上有一个图像 slider ，它是一个名为 LightSlider 的插件这就是初始化 slider 的方式

var lightSlider = $("#lightSlider").lightSlider({ // Code Block 1
    item: 1,
    mode: 'fade',
    keyPress: true,
    pager: false,
    controls: false
});

LightSlider 也提供了公共(public)方法，其中之一就是我正在尝试使用的。我正在尝试创建一个自定义按钮来转到上一张和下一张幻灯片。这是适当的代码

$('.arrow-left[data-slider="lightSlider"]').on('click', function(){
   lightSlider.goToPrevSlide(); // Code Block 2
});

以及对应的html

<div class="arrow-left" data-slider="lightSlider">
     <i class="fa fa-chevron-left"></i> // Code Block 3
</div>

它工作得很好，但我在页面上有多个 slider ，并为所有 slider 分配一个唯一的 id，并为每个按钮一遍又一遍地编写 javascript 代码( block 2)，这对我来说似乎不太有效，所以我想到使用data- 属性可“自动化”该过程。为此我尝试过

$('.arrow-left').on('click', function(){
    var target = $(this).attr('data-slider');
    console.log(target);
    target.goToPrevSlide();
});

但是没有成功。我收到的错误是 target.goToPrevSlide() 不是函数。当然不是，但我假设 target 会被它的值 lightSlider 替换，不是吗？

console.log 的输出是 lightSlider。我的问题是为什么它不起作用以及解决方法是什么？

Answer 1

你想做的是这样的:

var lightSlider = $("#lightSlider").lightSlider({ // Code Block 1
    item: 1,
    mode: 'fade',
    keyPress: true,
    pager: false,
    controls: false
});
# Assign the `data-slide` attribute of element `#lightSlider` to the instance of `lightSlider`.
$("#lightSlider").data('slide', lightSlider);

然后，您将能够通过 jquery 直接从节点访问 lightSlide。

您可能想看看jquery data文档。