0

Estou usando o plugin jQuery Flipster e está dando o erro "Uncaught TypeError: undefined is not a function"

Segue o HTML:

<input name="carvar" id="carvar" type="text">
<div id="Main-Content">
<div class="Container">
<!-- Flipster List -->  
    <div class="flipster">
      <ul class="flip-items">
        <li id="Coverflow-1" title="Cricket" data-flip-category="Fun Sports">
            <img src="Escudos/atletico1.png" data-title="Atletico">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-1" title="Cricket" data-flip-category="Fun Sports">
            <img src="Escudos/botafogo1.png" data-title="Botafogo">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-2" title="Surfing" data-flip-category="Fun Sports">
            <img src="Escudos/corinthians1.png" data-title="Corinthians">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-3" title="Baseball" data-flip-category="Boring Sports">
            <img src="Escudos/cruzeiro1.png" data-title="Cruzeiro">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-4" title="Running" data-flip-category="Boring Sports">
            <img src="Escudos/flamengo1.png" data-title="Flamengo">
             <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-7" title="Air Kicking" data-flip-category="These are Sports?">
            <img src="Escudos/fluminense1.png" data-title="Fluminense">
            <p class="mostra-titulo"></p>
        </li>
        <li id="Coverflow-6" title="Extreme Bike Sitting" data-flip-category="These are Sports?">
            <img src="Escudos/vasco1.png" data-title="Vasco">
            <p class="mostra-titulo"></p>
        </li>
      </ul>
    </div>
<!-- End Flipster List -->

</div>
</div>

E aqui o código:

<script>
$(function($){
$(".flipster").flipster({style: 'carousel', enableTouch: true, start: 0, enableNavButtons: true,
onItemSwitch: $('li').each(function(){
var $this = $(this);     
var titulo = $this.find('img').data('title');  
document.getElementById("carvar").value = titulo; 

$this.find('.mostra-titulo').html(titulo); 

})
}); 
});
</script>

2 Respostas 2

0

Olá, o problema acontece quando o construtor vai buscar pela próxima "li" e as mesmas já foram varridas, sendo assim a função each não vai ser definida. O problema pode ser resolvido assim.

$(".flipster").flipster({
   style: 'carousel', 
   enableTouch: true, 
   start: 0, 
   enableNavButtons: true,
   onItemSwitch: function(){

      if($('li').length >= 1){
         $('li').each(function(){
              var $this = $(this);     
              var titulo = $this.find('img').data('title');  
              document.getElementById("carvar").value = titulo; 
              $this.find('.mostra-titulo').html(titulo); 
         });
      }
  }
}); 

Você também pode usar dessa forma, https://github.com/drien/jquery-flipster/blob/master/demo/demo.html ,onde usam as opções:

itemContainer: 'ul',
itemSelector: 'li',

Dessa forma o problema também pode ser resolvido.

3
  • Obrigado, Vinicius. O erro desapareceu. Porém a cada chamada do "onItemSwitch", o código percorre todos os "img" colocando no textbox o valor da variável "titulo". Só que eu queria que a variavel "titulo" mantivesse a informação apenas da img selecionada. Obrigado! Commented 5/11/2014 às 2:33
  • Seria alguma coisa tipo recuperar o "SelectedIndex" ou "CurrentIndex" da imagem. Commented 5/11/2014 às 11:11
  • Obrigado Vinícius Montanheiro! Funcionou perfeitamente. Abs! Commented 5/11/2014 às 15:27
0

Por nada. Mas para fazer isso você não precisar buscar todas "li". Se eu entendi, acho que você quer fazer isso.

$(".flipster").flipster({
   style: 'carousel', 
   enableTouch: true, 
   start: 0, 
   enableNavButtons: true,
   onItemSwitch: function(){
     $('.flip-items li').on('click',function(){
         var titulo = $('img',this).attr('data-title');
         $('#carvar').val(titulo); 
         $('p',this).html(titulo); 
     });
  }
});

E talvez você nem precise usar isso dentro do "onItemSwitch", ela pode ficar em algum script. Se não for isso me desculpe. Valeuu!!!

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .