ausblenden Element Taste

Question

Ich habe eine Schaltfläche zeigt Code, der jede div tut verstecken oder Element i jedoch wollen das Problem ist, ich eine Datentabelle haben, die für jede Zeile in der Tabelle

, wenn der Auftrag mehr als eine Option wählen zeigt 3 Artikel hat, wird er die drei Elemente mit den drei Auswahlmöglichkeiten angezeigt werden nur

jedoch die ausblenden-Schaltfläche für die ersten und nicht für die andere 2 jeweils ausgewählte Option funktioniert hat seine eigene Taste erzeugte

mein Code unten

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> 
 

 
<script> 
 
    $(document).ready(function() { 
 
     $(".edit_status_combo").change(function (event) { 
 
      var row_id = $(this).closest("tr").find(".row_id").val(); 
 
      var delivery_id = $(this).closest("tr").find(".delivery_id").val(); 
 
      var status = $(this).closest("tr").find(".edit_status_combo").val(); 
 
      jQuery.ajax({ 
 
       type: "POST", 
 
       url: "<?php echo base_url(); ?>" + "index.php/sales/view_delivery", 
 
       data: {row_id: row_id, delivery_id:delivery_id, i_status: status} 
 
      }) 
 
     }) 
 
    }) 
 
    
 
     jQuery(document).ready(function(){ 
 
     jQuery('#hideshow1').on('click', function(event) {   
 
      jQuery('#edit_status_combo').toggle('show'); 
 
     }); 
 
    }); 
 
</script> 
 

 
<div class="modal-dialog modal-lg no-modal-header"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
 
       <i class="fa fa-2x">&times;</i> 
 
      </button> 
 
      <button type="button" class="btn btn-xs btn-default no-print pull-right" style="margin-right:15px;" onclick="window.print();"> 
 
       <i class="fa fa-print"></i> <?= lang('print'); ?> 
 
      </button> 
 
      <?php if ($logo) { ?> 
 
       <div class="text-center pull-left" style="margin-bottom:20px;" > 
 
        <img src="<?= base_url() . 'assets/uploads/logos/' . $biller->logo; ?>" 
 
         alt="<?= $biller->company != '-' ? $biller->company : $biller->name; ?>"> 
 
       </div> 
 
      <?php } ?> 
 
      <div class="table-responsive"> 
 
       <table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;" > 
 

 
        <tbody style="font-size: 12px !important;"> 
 
         <tr> 
 
         <td><div class="col-xs-19 text-left"><?= lang("customer"); ?>: <?= $delivery->customer; ?></div></td> 
 
         <td><div class="col-xs-19 text-right"><?= lang("sale_reference_no"); ?>: <?= $delivery->sale_reference_no; ?></div></td> 
 
        </tr> 
 
        <tr> 
 
         <td><div class="col-xs-19 text-left"><?= lang("address"); ?>: <?= $delivery->address; ?></div></td> 
 
         <td><div class="col-xs-19 text-right"><?= lang("do_reference_no"); ?>: <?= $delivery->do_reference_no; ?></div></td> 
 
        </tr> 
 
        <tr> 
 
         <td><div class="col-xs-19 text-left"></div></td> 
 
         <td><div class="col-xs-19 text-right"><?= lang("Estimated Delivery Date"); ?>: <?= $this->sma->hrld($delivery->date); ?></div></td> 
 
        </tr> 
 
        <tr> 
 
         <td><div class="col-xs-19 text-left"></div></td> 
 
         <td><div class="col-xs-19 text-right"><?= lang("status"); ?>: <?= $delivery->status; ?></div></td> 
 
         
 
        
 
        </tr> 
 
        <tr> 
 
         <td><div class="col-xs-19 text-left"></div></td> 
 
         <td><div class="col-xs-19 text-right"><?= lang("Staff Name"); ?>: <?= $user->first_name . ' ' . $user->last_name; ?></div></td> 
 
         
 
        
 
        </tr> 
 
        
 
        
 
         
 
        
 
        </tbody> 
 

 
       </table> 
 
       
 
       
 
      </div> 
 
      <h3><?= lang("items"); ?></h3> 
 
      <div class="table-responsive"> 
 
       <table class="table table-bordered table-hover table-striped" > 
 
        <thead > 
 
         <tr> 
 
          <th style="text-align:center; vertical-align:middle;"><?= lang("no"); ?></th> 
 
          <th style="vertical-align:middle;"><?= lang("description"); ?></th> 
 
          <th style="text-align:center; vertical-align:middle;"><?= lang("quantity"); ?></th> 
 
          <th class="status_column_table"><?= lang("product_status"); ?></th> 
 
         </tr> 
 
        </thead> 
 

 
        <tbody> 
 

 
        <?php $r = 1; 
 
        foreach ($rows as $row): ?> 
 
         <tr> 
 
          <td style="text-align:center; width:40px; vertical-align:middle;"><?= $r; ?></td> 
 
          <td style="vertical-align:middle;"> 
 
           <?= $row->product_code ." - " .$row->product_name .($row->variant ? ' (' . $row->variant . ')' : ''); 
 
           if ($row->details) { 
 
            echo '<br><strong>' . lang("product_details") . '</strong> ' . 
 
            html_entity_decode($row->details); 
 
           } 
 
           ?> 
 
           
 
           
 
           
 

 
           
 
          
 
          </td> 
 
          <td style="width: 150px; text-align:center; vertical-align:middle;"><?= $this->sma->formatQuantity($row->unit_quantity).' '.$row->product_unit_code; ?></td> 
 
          <td style="text-align:center; width:40px; vertical-align:middle;"> 
 
           
 
            
 
           
 
           <input class = "row_id" type="hidden" name="row_id_text" value="<?= $row->product_id;?>"> 
 
           <input class = "delivery_id" type="hidden" name="delivery_id_text" value="<?= $delivery->id;?>"> 
 
<div class='no-print'><input type='button' id='hideshow1' value=''></div> 
 
          
 
           <select id="edit_status_combo" name="item_status"> 
 
            <option value="delivering" <?= $row->status=='delivering' ? 'selected' : '';?>>Delivering</option> 
 
            <option value="delivered" <?= $row->status=='delivered' ? 'selected' : '';?>>Delivered</option> 
 
            <option value="waiting" <?= $row->status=='waiting' ? 'selected' : '';?>>Waiting</option> 
 
            <option value="returned" <?= $row->status=='returned' ? 'selected' : '';?>>Returned</option> 
 
            <option value="wrong" <?= $row->status=='wrong' ? 'selected' : '';?>>Wrong</option> 
 
            <option value="damaged" <?= $row->status=='damaged' ? 'selected' : '';?>>Damaged</option> 
 
            <option value="missing" <?= $row->status=='missing' ? 'selected' : '';?>>Missing</option> 
 
           </select> 
 
           
 
          
 
           
 
          </td> 
 
         </tr> 
 
         <?php 
 
         $r++; 
 
        endforeach; 
 
        ?> 
 
        
 
        </tbody> 
 
        
 
       </table> 
 
      </div> 
 
      <div class="table-responsive"> 
 
       <table border="0" cellpadding="0" cellspacing="0" width="100%" style = "border-collapse: collapse;" > 
 

 
        <tbody style="font-size: 12px !important;"> 
 
         <tr> 
 
         <td width="6%"><div class="form-group pull-left"><?= lang("ccf1", "cf1"); ?> 
 
         <?php echo form_checkbox('cf1', 'cf1', $customer->cf1, 'class="form-control" id="cf1"'); ?></div></td> 
 
         <td width="6%"><div class="form-group pull-left"><?= lang("ccf2", "cf2"); ?> 
 
         <?php echo form_checkbox('cf2', 'cf2', $customer->cf2, 'class="form-control" id="cf2"'); ?></div></td> 
 
         <td width="12%"<div class="form-group pull-left"> <?= lang("ccf3", "cf3"); ?> 
 
         <?php echo form_checkbox('cf3', 'cf3', $customer->cf3, 'class="form-control" id="cf3"'); ?></div></td> 
 
         <td width="12%"><div class="form-group pull-left"><?= lang("ccf4", "cf4"); ?> 
 
         <?php echo form_checkbox('cf4', 'cf4', $customer->cf4, 'class="form-control" id="cf4"'); ?></div></td> 
 
         <td width="63%"></td> 
 
        </tr> 
 
        
 
        
 
        
 
         
 
        
 
        </tbody> 
 

 
       </table> 
 
      </div> 
 
      
 
      <div class="clearfix"></div> 
 
<?php if ($delivery->note) { ?> 
 
         <div class="well well-sm"> 
 
          <p class="bold" style="font-size:11px;"><?= lang("note"); ?>:</p> 
 
          <div style="font-size:11px;"><?= $this->sma->decode_html($delivery->note); ?></div> 
 
         </div> 
 
        <?php } ?> 
 
        <p class="bold" style="font-size:11px;"><?= lang("Customer Satisfaction"); ?>:</p> 
 
        <input type="text" id="txtbox123"> 
 
        <br> 
 
         
 
        <br> 
 
      
 
      <div class="row"> 
 
       <div class="col-xs-4 pull-left"> 
 
        <p style="height:30px; font-size:11px;"><?= lang("received_by"); ?> : </p> 
 
        <hr style="height:1px;border:none;color:#333;background-color:#333;"> 
 
        <p style="font-size:11px;"><?= lang("Receiver/Customer Signature"); ?></p> 
 
       </div> 
 
       <div class="col-xs-4 pull-right"> 
 
        <p style="height:30px; font-size:11px;"><?= lang("delivered_by"); ?>: </p> 
 
        <hr style="height:1px;border:none;color:#333;background-color:#333;"> 
 
        <p style="font-size:11px;"><?= lang("stamp_sign"); ?></p> 
 
       </div> 
 
       
 
      </div> 
 
      
 

 
     </div> 
 
    </div> 
 
</div>

die jquery ist an der Spitze

wie kann ich es machen, so funktioniert es jedes Mal, wenn unten erzeugt wird, ein Beispiel des Auswahlelementes ist , wie Sie das erste Zeilenauswahlelement sehen erfolgreich, die anderen verborgen war nicht funktionieren

enter image description here

Answer 1

Sie konnten die #edit_status_combo ändern und eine Klasse auf das Element hinzufügen möchten, nennen wir es .ED it_status_combo dann könnte man eine .each() verwenden, so:

jQuery(document).ready(function(){ 
     jQuery('#hideshow1').on('click', function(event) {   
      jQuery('.edit_status_combo').each(function(){ 
       jQuery(this).toggle('show'); 
      }); 
     }); 
    });