javascript
  • php
  • jquery
  • codeigniter
  • foreach
  • 2016-08-09 14 views 0 likes 
    0

    Mit codeigniter 3.xjQuery Toggle auf PHP foreach-Schleife

    Ich versuche, Daten aus der Datenbank-Schleife foreach zu bekommen.

    <h3 style="margin-right:15px;" id='hideshow'>August 2016</h3> 
    <?php foreach($duxeos as $e): ?> 
    <div class='content' ><h4 class="dropdate"><?php echo $e->fulldate;?></h4><div class="cdropdate" class="defhide"><?php echo $e->content;?></div></div> 
    <?php endforeach; ?> 
    

    javascript:

    jQuery(document).ready(function(){ 
         jQuery('.hideshow').live('click', function(event) { 
          jQuery('.content').toggle('show'); 
         }); 
        }); 
    
        jQuery(document).ready(function(){ 
         jQuery('.dropdate').live('click', function(event) { 
          jQuery('.cdropdate').toggle('show'); 
         }); 
        }); 
    

    jetzt es funktioniert, aber wenn ich die Haut drücken, sie alle Inhalte verbergen, wie kann ich Inhalte verbergen, was ich will?

    +0

    Ich sehe keine 'loop' in Ihrem Code .. Auch nicht, dass [___There nicht mehrere' elements' in einem 'document' sein muß, die denselben haben' ID-Wert .___] (https://www.w3.org/TR/html-markup/global-attributes.html#common.attrs.id) – Rayon

    +0

    'foreach ($ data as $ e)' ist foreach-Schleife –

    +0

    Gut! Betrachten Sie den zweiten Punkt in meinem Kommentar. – Rayon

    Antwort

    2
    • Verwendung this Kontext in handler-function
    • Verwenden .on statt .live
    • Verwenden .closest das nächste Element zu erhalten, um Kind zu finden.

    jQuery(document).ready(function() { 
     
        jQuery('.dropdate').on('click', function(event) { 
     
        jQuery(this).closest('.content').find('.cdropdate').toggle(); 
     
        }); 
     
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     
    <h3 style="margin-right:15px;" id='hideshow'>August 2016</h3> 
     
    <div class='content'> 
     
        <h4 class="dropdate">Full-Date</h4> 
     
        <div class="cdropdate defhide">Content</div> 
     
    </div> 
     
    <hr> 
     
    <div class='content'> 
     
        <h4 class="dropdate">Full-Date</h4> 
     
        <div class="cdropdate defhide">Content</div> 
     
    </div>

    +0

    danke, jetzt funktioniert es perfekt :) –

    Verwandte Themen