javascript - 单击 slider 下一个和上一个按钮时，我得到 $curr[action] 不是函数

Question

我正在关注这个 Js fiddle http://jsfiddle.net/ryt3nu1v/10/

我的结果:

我正在制作一个显示年龄的 slider ，因为我有一个跟随年龄的数组

15,25,35,45,55

我正在尝试在 slider 中显示它们 预期的行为是当我单击下一个按钮时看到下一个年龄

我根据需要从 fiddle 中使用的代码是

          //Age slider
          $('div.result-age:gt(0)').hide(); //Hide all but the first one

var $allSlides = $('div.result-age'), 
    traverseDefault = "first", //set the defaults
    actionDefault ="arrow-next";

$('.arrow-next,.selected-arrow-left-pointer').click(function(){

    var traverse = traverseDefault,
        action = actionDefault;

    if($(this).is('.selected-arrow-left-pointer')){ //if action is prev
        traverse = "last"; //set traverse to last in case nothing is available
        action = "selected-arrow-left-pointer"; //set action to prev
    }

    var $curr = $allSlides.filter(':visible'), //get the visible slide
        $nxtTarget =  $curr[action](".result-age"); //get the next target based on the action.

    $curr.stop(true, true).fadeIn(1000).hide(); //hide current one

    if (!$nxtTarget.length){ //if no next
        $nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
    }

    $nxtTarget.stop(true, true).fadeIn(1000); //show the target

});
          //age slider end

这是我的 HTML

<div class="result-box">
<div class="selected-arrow-left-pointer"></div>
<div class="result-age"><span><h4 v-for="(row,key,index) in ages">ALL ages here currently being display all at once</h4></span></div>
<div class="arrow-next"></div>

</div>

我当前的风格是年龄将显示在中心，左右两侧有下一个和上一个按钮

我错过了什么？

Answer 1

您的 v-for 正在创建多个 h4 标记，但您需要为每个数字创建 result div，因此请移动您的 v- for 在你的 div 标签中。然后，你对 actionDefault 和 action 使用了错误的值，它应该是 next & prev 其中 next 指的是下一张幻灯片，prev 指的是上一张幻灯片而不是类名。

演示代码:

$('div.result-age:gt(0)').hide();
var $allSlides = $('div.result-age'),
  traverseDefault = "first",
  actionDefault = "next"; //use next ..refer next node

$('.arrow-next,.selected-arrow-left-pointer').click(function() {
  var traverse = traverseDefault,
    action = actionDefault;
  if ($(this).is('.selected-arrow-left-pointer')) {
    traverse = "last";
    action = "prev"; //use prev..refer prev..
  }

  var $curr = $allSlides.filter(':visible');
  $nxtTarget = $curr[action](".result-age");

  $curr.stop(true, true).fadeIn(1000).hide();
  if (!$nxtTarget.length) {
    $nxtTarget = $allSlides[traverse]();
  }

  $nxtTarget.stop(true, true).fadeIn(1000);
});

span.next,
span.prev {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="result-box">
  <div class="selected-arrow-left-pointer">
    << </div>
      <!--your div should have ` v-for="(row,key,index) in ages"`-->
      <div class="result-age"><span><h4>1</h4></span></div>
      <div class="result-age"><span><h4>2</h4></span></div>
      <div class="result-age"><span><h4>3</h4></span></div>
      <div class="arrow-next"> >> </div>
  </div>