Question

我的页面上有一个基本的图像滑块和一些控制滑块移动的按钮。我正在尝试使用数据属性告诉jquery需要移动哪个滑块。这是按钮的html

<ul class="slider-controls">
    <li><a href="#" class="left" data-controls="hero"><i class="fa fa-angle-left"></i></a></li>
    <li><a href="#" class="right" data-controls="hero"><i class="fa fa-angle-right"></i></a></li>
</ul>

另一个是

<ul class="slider-controls">
    <li><a href="#" class="left" data-controls="product"><i class="fa fa-angle-left"></i></a></li>
    <li><a href="#" class="right" data-controls="product"><i class="fa fa-angle-right"></i></a></li>
</ul>

滑块初始化如此

var hero = $('#hero ul.slider').lightSlider();

要转到滑块中的下一张幻灯片，我所要做的只是hero.goToNextSlide();，但hero部分应该来自html。这就是我目前对于右侧的所有内容

$('.slider-controls .right').on('click', function(e){
    e.preventDefault();
    var control = $(this).data('controls');
    //move slide to right here
});

现在control的值为“hero”，但这是一个字符串，不引用对象hero。如何从hero.goToNextSlide();？

的值成功执行control

Answer 1

我的建议是将滑块实例保存在滑块所连接的DOM元素的data对象中。

var hero = $("#hero ul.slider").lightSlider(); 
var product = $("#product ul.slider").lightSlider();

$("#hero ul.slider").data('slider', hero);
$("#product ul.slider").data('slider', product);

然后，在单击处理程序中，您将获得如下滑块实例：

 var control = $(this).data('controls');
 var slider_obj = $('#' + control + ' ul.slider').data('slider');

从此处，您可以调用lightslider中提供的任何公共功能：

slider_obj.goToPrevSlide();
slider_obj.goToNextSlide();

所以，完整的代码在这里：

$(document).ready(function() {

var hero = $("#hero ul.slider").lightSlider(); 
var product = $("#product ul.slider").lightSlider();

$("#hero ul.slider").data('slider', hero);
$("#product ul.slider").data('slider', product);

$('.slider-controls .left').on('click', function(e){
    e.preventDefault();
    var control = $(this).data('controls');

   var slider_obj = $('#' + control + ' ul.slider').data('slider');

   //move slide to left here
   slider_obj.goToPrevSlide();

 });

$('.slider-controls .right').on('click', function(e){
    e.preventDefault();
    var control = $(this).data('controls');

    //move slide to right here

   var slider_obj = $('#' + control + ' ul.slider').data('slider');

   slider_obj.goToNextSlide();

 });

});

在这里小提琴：Using Phoenix with Cloudera Hbase (installed from repo)。

Answer 2

您可以尝试以下方法：

//go to next slide
$('.slider-controls .right').on('click', function(e){
    e.preventDefault();
    var controlId = $(this).data('controls');

    //move slide to right here
    var slider = $("#"+controlId + " ul.slider").lightSlider(); //grab the slider object on which we can execute the operations
    slider.goToNextSlide();
});

//go to prev slide
$('.slider-controls .left').on('click', function(e){
    e.preventDefault();
    var controlId = $(this).data('controls');

    //move slide to left here
    var slider = $("#"+controlId+ " ul.slider").lightSlider(); //grab the slider object on which we can execute the operations
    slider.goToPrevSlide();
});

注意：假设您的两个滑块都已初始化为：

var hero = $('#hero ul.slider').lightSlider();
var product = $('#product ul.slider').lightSlider();

Jquery - 获取对象名称并对其执行方法

2 个答案: