可以'不能间接执行JQuery函数

Can't execute JQuery function indirectly

本文关键字：执行 JQuery 函数 不能 可以      更新时间：2023-09-26

我想标题非常不准确，所以请为我这个问题建议一个合适的标题。

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

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

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

$('.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>

它运行得很好，但我在页面上有多个滑块，并为所有滑块分配一个唯一的id，并为每个按钮一遍又一遍地编写javascript代码（块2），这对我来说似乎不是很有效，所以我想使用data-属性来"自动化"这个过程。为此，我尝试了

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

但它没有起作用。我收到的错误是target.goToPrevSlide() is not a function。当然不是，但我假设target会被它的值lightSlider取代，不是吗？

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

您想要做的是：

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数据文档。

有几种方法可以实现这一点。一种方法是在每个滑块自己的上下文中初始化：

$('.slider-wrapper').each(function() {
    var lightSlider = $('.slider', this).lightSlider({
        item: 1,
        mode: 'fade',
        keyPress: true,
        pager: false,
        controls: false
    });
    $('.arrow-left', this).on('click', function(){
       lightSlider.goToPrevSlide();
    });
});

HTML:

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

这样，即使在同一页上有多个"滑块"元素，函数块中的lightSlider变量也始终与正在初始化的特定元素相对应。

相关文章：