Question

使用slider-pro时，我无法获取转盘内幻灯片数量的幻灯片计数。我看过this solution，但没有运气。我的代码如下：

$(document).ready(function($) {
 $('.slider-pro').sliderPro();
});

 var slider = $( this ).data( 'sliderPro' );

 $(this).append('<div class="counter"><span class="active">'+ (parseInt(slider.getSelectedSlide()) + 1) +'</span>/'+slider.getTotalSlides()+'</div>');
 slider.on( 'gotoSlide', function( event ) {
 $(this).find('.counter .active').text(event.index + 1);
 });

但是我收到控制台错误：

TypeError: slider is undefined, can't access property "getSelectedSlide" of it

我不是一个jQuery专家，所以我不确定为什么在jquery.sliderPro.js文件中定义了属性getSelectedSlide时会给我这个错误。也许我没有正确调用它，或者需要将该属性绑定到类或ID。我不确定。我都尝试过，但似乎没有任何作用。

非常感谢！

不幸的是，我正在使用类选择器来初始化具有相同参数的同一页面上的多个滑块。我不想使用id，因为我将不得不为每个滑块实例创建一个唯一的id，这是我不想要的，并且将变得难以管理。我也不能为每个滑块动态生成一个ID。示例页面在这里： BFMagazine

现在，我必须将滑块号/总数硬编码到每张幻灯片中，这并不理想。

使用的相关Slider-Pro js是：

$(document).ready(function($) {

  $('.slider-pro').sliderPro({
    width: '100%',
    arrows: true,
    fadeArrows: false,
    buttons: false,
    fade: true,
    fadeDuration: 200,
    thumbnailPosition: 'bottom',
    thumbnailWidth: 75,
    thumbnailHeight: 75,
    autoplay: false,
    fullScreen: false,
    breakpoints: {
      480: {
        thumbnailWidth: 40,
        thumbnailHeight: 40
      }
    }
  });

  $.each('.slider-pro', function() {

      var slider = $('.slider-pro').data('sliderPro');

      $('.slider-pro').append('<div class="counter"><span class="active">' + (parseInt(slider.getSelectedSlide()) + 1) +
    '</span>/' + slider.getTotalSlides() + '</div>');

      slider.on('gotoSlide', function(event) {
      $('.slider-pro').find('.counter .active').text(event.index + 1);
      });

    });

});

我收到控制台错误：

TypeError: cannot use 'in' operator to search for 'length' in '.slider-pro'

我正在使用jquery-2.1.4.min.js

任何建议将不胜感激。

非常感谢！

Answer 1

这是一个简单的问题，实际上您找到的代码缺少有关如何使用的其他详细信息；该代码需要在对象或事件处理程序上下文中使用，因此this将引用该对象，但是在您的情况下，您尝试在外部使用它，因此this没有上下文，因此我们可以'不能这样使用。

无论如何，您告诉过您，jquery的新手很好。您需要做的是代替“ this”，如果您在“外面”，则直接使用css选择器，这样就可以了

 var slider = $('.slider-pro').data( 'sliderPro' );
 // here this is not ok as it is "outside"

 $('.slider-pro').append('<div class="counter"><span class="active">'+ (parseInt(slider.getSelectedSlide()) + 1) 
 +'</span>/'+slider.getTotalSlides()+'</div>');

 slider.on('gotoSlide', function( event ) {
   $(this).find('.counter .active').text(event.index + 1);
   // here this is ok as it is "inside"
 });

更新：

您几乎就在那儿，但是您不必分别使用this，而是需要分别使用this，两者之间的区别在于，第二个专用于Dom节点，您可以使用{{ 1}}内在的神奇之处在于无需实际赋予它们任何明确的属性（例如ID）即可引用每个项目

this

一个简短的解释是，$('.slider-pro').each(function(index, element) { //using $(element) instead of $(this) should work too $(this).sliderPro({ //..options }); var slider = $(this).data('sliderPro'); $(this).append('<div class="counter"><span class="active">' + (parseInt(slider.getSelectedSlide()) + 1) + '</span>/' + slider.getTotalSlides() + '</div>'); slider.on('gotoSlide', function(event) { $(this).find('.counter .active').text(event.index + 1); // finds only the .counter and .active inside the current slider divsnot touching .counter and .active of other slider divs }); });循环遍历与选择器匹配的所有Dom节点，并为您提供上下文$(selector).each(..)，该上下文将始终引用迭代的当前项，但仅在每个功能的范围。例如，如果匹配项是一组this，则可以分别引用每个<div>

Slider Pro幻灯片计数

1 个答案: