1

Bom dia sou novo a programar em jquery, e neste momento estou num estagio onde necessito de fazer uma tabela, em que as linhas dessa tabela consistem em dois botoes e quatro cartoes (cards), caso estes exitam. Para tal utilizo um vector, $array, que vem da minha base de dados, para gerar os cards.

Como a imagem mostra.

inserir a descrição da imagem aqui

O meu problema e que ao clicar nos botoes deve ser substituido o texto atual dos cartoes, para o texto dos elementos seguintes/anteriores, dependendo do botao clicado. E nao sei como dizer ao jquery para fazer .empty() dos cartoes dessa linha e de seguida fazer o .append() de $array[$i+4] visto que o maximo de cartoes mostrados de uma vez (numa so linha sao 4).

ps: Eu criei um contador $i, para dar uma classe aos cartoes,de forma a manipula-los com jquery (embora me tenham dito q nao era boa pratica, mas nao tinha mesmo outra ideia) Alguma forma de fazer isto? toda a ajuda neste momento e bem vinda

OBrigado desde ja.

o meu HTML:(esta a ser utilizado "materialize")

    <html>
    <script type="text/javascript" src="/private/includes/js/java.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       ...
        <div>
   <!-- tabela das vagas-->
   <table style="margin-left: 20%; margin-right: -20%;" >
      <?php
         $i=0;
         foreach($data as $row => $array){

         ?>
      <p hidden="" id="arrayhiden"><?php echo json_encode($array) ?></p>
      <tr>
         <div>
            <td>
               <button name="back" class="btn-floating btn-large waves-effect waves-indigo indigo darken-1"  onclick=pCards()><i class=" mdi-navigation-arrow-back"></i></button>
            </td>
            <td>
               <h4 style="margin-left: 15%;">Vagas de <?=$array[0]['nome'] ?></h4>
               <?php
                  foreach($array as $innerRow => $a){
                      ?> 
               <div id="<?= $i ?>" class="col s12 m3 l3" >
                  <div class="row">
                     <div class="card" id="cards">
                        <div id="logo" class="card-image">
                           <img src=<?=$a['logo']?>>
                        </div>
                        <div id="vaga" class="card-content">
                           <p><?=$a['vaga']?></p>
                        </div>
                        <div id="nome" class="card-action">
                           <a href="#"><?=$a['nome']?></a>
                        </div>
                     </div>
                  </div>
               </div>
               <?php
                  $i++;
                  } 
                  ?>
            </td>
            <td>
               <button id="forward" class="btn-floating btn-large waves-effect waves-indigo indigo darken-1"  onclick=nCards()><i class=" mdi-navigation-arrow-forward"></i></button>
            </td>
         </div>
      </tr>
      <?php
         } 
         ?>
   </table>
</div>
     ...
      </html>

o meu jquery:

function nCards(){

    var $aa=[];
    var $aa= $("#arrayhiden").html();
    alert($aa); //to check the array
    }
3
  • 1
    Podes colocar esses cartões todos numa div longa sem overflow e fazeres css transition da margin-left quando se clica num botão. Assim eles deslizam para os lados e não tens de mudar o HTML dos cartões...
    – Sergio
    24/06/2015 às 13:24
  • Não entendi bem certo o seu problema Nuno Gonçalves, o que você quer fazer é um "Carousel" ? Se sim, já existem vários componentes prontos para isso. Se não, se a ideia for substituir os cartões atuais por outros cartões (trocando de 4 em 4) você pode usar AJAX para buscar os cartões e mostrar na tela, paginando o seu resultado de 4 em 4 registros, do mesmo modo que você faria uma paginação de resultados.
    – Gildonei
    24/06/2015 às 18:52
  • sim basicamente e um carousel, vou tentar utilizar pluglins, como dito na resposta, em baixo, e depois devo dar a pergunta como encerrada :) obrigado a todos os que respoderam :) 25/06/2015 às 12:40

1 Resposta 1

0

Nuno Gonçalves o que você está tentando fazer é chamado de CAROUSEL e existem vários plugins que já fazem isso.

Segue abaixo um exemplo utilizando o plugin jCarousel

jCarousel

jquery:

#jquery
$(function() {
    $('.jcarousel').jcarousel();
});

html:

#html
<div class="jcarousel">
<ul>
    <li>...</li> <!-- Cada LI será um 'card' -->
    <li>...</li> <!-- Cada LI será um 'card' -->
</ul>

css:

#css
.jcarousel {
    position: relative;
    overflow: hidden;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    float: left;
}

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 .