将JavaScript传送到jQuery以进行轮播

debugcn 发表于 Dev

qqruza

我正在尝试将旋转木马的JavaScript转换为jQuery。

我的代码是：

document.querySelectorAll('.indicators')[0].style.color = 'red';
document.querySelector('.toggler-prev').style.display = 'none';
document.addEventListener('postchange', function(event){
  document.querySelectorAll('.indicators')[event.lastActiveIndex].style.color = 'white';
  document.querySelectorAll('.indicators')[event.activeIndex].style.color = 'red';
  var togglerPrev = document.querySelector('.toggler-prev');
  var togglerNext = document.querySelector('.toggler-next');
  if (event.activeIndex === 3) {
  togglerPrev.style.display = 'block';
  togglerNext.style.display = 'none';
  } else if (event.activeIndex === 0) {
  togglerNext.style.display = 'block';
  togglerPrev.style.display = 'none';
  } else {
  togglerNext.style.display = 'block';
  togglerPrev.style.display = 'block';
  }
});

我转移到了jQuery：

$('.indicators').css('color','#000');
$('.toggler-prev').css('display','none');
$(window).on('postchange', function(event){
  $('.indicators')[event.lastActiveIndex].css('color','#FFF');
  $('.indicators')[event.activeIndex].css('color','#000');
  var togglerPrev = $('.toggler-prev');
  var togglerNext = $('.toggler-next');
  if (event.activeIndex === 3) {
  togglerPrev.css('display','block');
  togglerNext.css('display','none');
  } else if (event.activeIndex === 0) {
  togglerNext.css('display','block');
  togglerPrev.css('display','none');
  } else {
  togglerNext.css('display','block');
  togglerPrev.css('display','block');
  }
});

但是它没有按我预期的那样工作，例如，切换器没有被隐藏，指示器的颜色没有被改变。

这是有效的JS示例：http : //codepen.io/anon/pen/eJYWQO

还有我的jQuery替代品：http : //codepen.io/anon/pen/eJYWrq

有人可以帮我编辑第二个Codepen吗？提前致谢。

马克

您忘记在某个地方提到您正在使用AngularJS和onsenUI;）

您的问题是，jQuery事件没有属性activeIndex和lastActiveIndex，但是可以在中找到它们event.originalEvent。

另外，就像@stalin在回答中所说的那样，您的指标不是jQuery对象，因此您不能css在它们上调用-function。将这些内容包装在另一个$()甚至更好的jQuery构造eq函数中，请使用-function从数组中返回jQuery包装的对象。

然后，为了优化某些可读性，您可能需要考虑hideandshow函数，而不是更改CSS属性display。

总的来说，您的代码应如下所示

$('.indicators').css('color', '#fff');
$('.indicators').eq(0).css('color', '#000'); // highlight the first indicator
$('.toggler-prev').hide();

$(window).on('postchange', function(event) {

    //store the indices for readability
    var activeIndex = event.originalEvent.activeIndex;
    var lastActiveIndex = event.originalEvent.lastActiveIndex;

    $('.indicators').eq(lastActiveIndex).css('color', '#FFF');
    $('.indicators').eq(activeIndex).css('color', '#000');

    var togglerPrev = $('.toggler-prev');
    var togglerNext = $('.toggler-next');

    if (activeIndex === carousel.getCarouselItemCount() - 1) {
        togglerPrev.show();
        togglerNext.hide();
    } else if (activeIndex === 0) {
        togglerNext.show();
        togglerPrev.hide();
    } else {
        togglerNext.show();
        togglerPrev.show();
    }
});