javascript - 将 javascript 转换为 jQuery 用于轮播

Question

我正在尝试将 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？提前致谢。

Answer 1

你忘了在某处提到你正在使用 AngularJS 和 onsenUI ;)

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

另外，正如@stalin 在他的回答中所说，您的指标不是 jQuery 对象，因此您不能对它们调用 css 函数。将这些东西包装在另一个 jQuery 构造函数中，例如 $() 或者更好，使用 eq - 从数组返回 jQuery 包装对象的函数。

然后，为了优化一些可读性，您可能需要考虑 hide 和 show 功能，而不是更改 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();
    }
});