隐藏元素按钮

Question

我有一个隐藏按钮代码，它确实隐藏了我想要的任何 div 或元素，但问题是我有一个数据表，它为表中的每一行显示多个选择选项

如果订单有 3 件商品，它将显示带有 3 个选择选项的 3 件商品

但是隐藏按钮只对第一个有效，对另外两个无效，每个选择选项都有自己的按钮生成

我的代码在下面

<?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>

jquery 在顶部

我怎样才能使它在每次生成时都能正常工作 下面是选择元素的示例 如您所见，第一行选择元素已成功隐藏，其他元素不起作用

enter image description here

Answer 1

您可以更改 #edit_status_combo 并向元素添加一个类，我们将其称为 .edit_status_combo 然后您可以使用 .each() 这样：

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