how to do . append() on the right card, according to the right array element

Asked

Viewed 203 times

1

Good morning I am new to programming in jquery, and at the moment I am in a stage where I need to make a table, in which the lines of this table consist of two buttons and four cards (cards), if these exist. To do this I use a vector, $array, which comes from my database, to generate the cards.

As the image shows.

inserir a descrição da imagem aqui

My problem is that when clicking the buttons should be replaced the current text of the cards, for the text of the following/previous elements, depending on the button clicked. And I don’t know how to tell jquery to do . Empty() of the cards of that line and then do the . append() from $array[$i+4] whereas the maximum of cards shown at once (in a single line are 4).

ps: I created a $i counter, to give a class to the cards, in order to manipulate them with jquery (although I was told that it was not good practice, but I had no other idea) Any way to do this? all the help at this time and welcome

Thank you from now on.

my HTML:(this to be used "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>

my jquery:

function nCards(){

    var $aa=[];
    var $aa= $("#arrayhiden").html();
    alert($aa); //to check the array
    }
php jquery html
  • 1

    You can put all those cards in a long div without overflow and do css Transition from margin-left when you click a button. So they slide sideways and you don’t have to change the HTML of the cards...

  • I don’t quite understand your problem Nuno Gonçalves, what do you want to do is a "Carousel" ? If so, there are already several components ready for this. If not, if the idea is to replace the current cards with other cards (switching from 4 to 4) you can use AJAX to fetch the cards and show on the screen, paging your result from 4 in 4 records, in the same way that you would make a result pagination.

  • yes basically and a Carousel, I will try to use pluglins, as said in the answer, below, and then I should give the question as closed :) thanks to all who responded :)

1 answer

0


Nuno Gonçalves what you are trying to do is called CAROUSEL and there are several plugins who already do that.

Below is an example using the 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;
}

Browser other questions tagged php jquery html

You are not signed in. Login or sign up in order to post.