单击 slider 下一个和上一个按钮我得到 $curr[action] is not a function

Question

I am following this Js fiddle http://jsfiddle.net/ryt3nu1v/10/

My Result:

I am making a slider that display age as I have an array that following ages

15,25,35,45,55

I am trying to display them in slider expected behavior is to see the next age when i click on next button

Code that I used from fiddle according to my need is

          //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

And this is my 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>

My current style is that age will be displayed in center with left and right sides having next and previous button

What am I missing?

Answer 1

Your v-for is creating mutliple h4 tag but you need create result div for each numbers so move your v-for inside your div tag.Then, you are using wrong values for actionDefault and action it should be next & prev where next refer to next slide and prev refer to previous slide not the classnames.

Demo Code :

 $('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>

Answer 2

I found the issue, you were using arrow-next instead of next , and selected-arrow-left-pointer instead of prev . Check the below working snippet. The data can be provided dynamically as you wish, currently I have given static data.

The next and prev are reserved keywords and hence the $curr[action] was expecting a function in return, while in your case it was `$curr['arrow-next'] instead of $curr['next'], which was returning undefined, and hence the error occurred.

 //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 = "next"; $(".next,.prev").click(function () { var traverse = traverseDefault, action = actionDefault; if ($(this).is(".prev")) { //if action is prev traverse = "last"; //set traverse to last in case nothing is available action = "prev"; //set action to prev } var currentData = $allSlides.filter(":visible"), //get the visible slide $nxtTarget = currentData[action](".result-age"); //get the next target based on the action. currentData.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 });

 .next, .prev { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="result-box"> <div class="prev"><</div> <div class="result-age"> <span><h4>ALL ages here currently being display all at once</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="result-age"> <span><h4>4</h4></span> </div> <div class="result-age"> <span><h4>5</h4></span> </div> <div class="next">></div> </div>