Automating a JS / Jquery function

Question

Automating a JS / Jquery function

Navigation

#1 by (1 votes)

1

I'm having a problem automating a function in JS / Jquery. I have the following code:

        $('.tab-pane').each(function(index, el) {
          tipo = $(this).attr('id');
          $("#owl-carousel-" + tipo).owlCarousel({
            loop: true,
            nav: true,
            items: 1,
            dots: true
          });
          $('#owl-carousel-' + tipo + ' .owl-page').each(function(index, el) {
            numberTotal = index;
          });
          $('#numbertotal' + tipo).text(numberTotal + 1);


          // Custom Navigation Events
          $("#" + tipo + " .btn-next").click(function() {
            $("#owl-carousel-" + tipo).trigger('owl.next');
            verificaActive(tipo);
          });
          $("#" + tipo + " .btn-prev").click(function() {
            $("#owl-carousel-" + tipo).trigger('owl.prev');
            verificaActive(tipo);
          });
        });

I do an iteration on all divs that have the ".tab-pane" class and get their id as a parameter for the rest of the function. Until then everything ok, the problem is in the click function, because it is only assigning the last iteration and over writes them.

Does anyone know a way to do this without taking parameters from the click button to make it automated?

Thank you in advance;)

EDIT

@juniorNunes Here's the HTML, they'll have other blocks like that changing the ID. The button block must be one for each slide and need to be through that script add functions to change between slides.

I added the "date-type" in the buttons just to work, however this way I will have to add in all the buttons and to avoid errors if you forget or some typing error it would be ideal to get this type by Js only by the ID of the div father.

<div role="tabpanel" class="tab-pane" id="central">
  <div class="owl-carousel" id="owl-carousel-central">
    <div class="item">
      <span>Slide 1</span>
    </div>
    <div class="item">
      <span>Slide 2</span>
    </div>
    <div class="item">
      <span>Slide 3</span>
    </div>
  </div>
  <div class="paginacao">
    <div class="btn-owl btn-first" data-tipo="central">
      <<</div>
        <div class="btn-owl btn-prev" data-tipo="central">
          <</div>

            <div class="contagem-slides">
              <span id="numbercurrentcentral"></span><span> de <span id="numbertotalcentral">8</span></span>
            </div>

            <div class="btn-owl btn-next" data-tipo="central">></div>
            <div class="btn-owl btn-last" data-tipo="central">>></div>
        </div>
    </div>

javascript jquery front-end each

asked by anonymous 07.12.2016 / 11:48

1 answer

Function return type for a linked list Overlap div over another and position in upper right corner

score 1 · Accepted Answer

See if this will work:

$('.tab-pane').each(function(index, el) {
  var id = $(el).prop('id');

  $(el).owlCarousel({
    loop:true,
    nav:true,
    items:1,
    dots: true
  });

  $(el).find('.owl-page').each(function(index, elm) {
    numberTotal = index;    
  });

  $('#numbertotal'+id).text(numberTotal+1);

  // Custom Navigation Events
  $(el).find('.btn-next').click(function(){
    $("#owl-carousel-"+id).trigger('owl.next');
    verificaActive(id);
  });
  $(el).find('.btn-prev').click(function(){
    $("#owl-carousel-"+id).trigger('owl.prev');
    verificaActive(id);
  });
});