Question

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

我的网页上有一个图片滑块，这是一个名为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-属性来自动化＆＃39;这个过程。为此我尝试了

$('.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。我的问题是为什么它不起作用以及解决方法是什么？

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

Answer 2

有几种方法可以解决这个问题。一种方法是在自己的上下文中初始化每个滑块：

phalcon.ini

HTML：

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

这样，即使在同一页面上有多个“slider”元素，功能块内的<div class="slider-wrapper"> <div class="slider"> ... </div> <div class="arrow-left"> <i class="fa fa-chevron-left"></i> // Code Block 3 </div> </div>变量也始终对应于正在初始化的特定元素。

无法间接执行JQuery函数

2 个答案: