On click slider next and previous button i get $curr[action] is not a function

user_11071424 0
Viewed 823

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

My Result:

My Output

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?

bootstrap-4 css html jquery javascript
2 Answers

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>

user_106064000

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>

user_33153330
Related