我如何将多个变量传递给模态

Question

所以我成功地将变量从一个模态传递到 another.The 问题是它们是多个变量，我用 PHP foreach 函数循环它们，显示所有项目但是当我点击任何项目，只有第一个变量被传递，而不是我选择的特定变量。我该如何解决这是初始模态的代码

  <div class="modal fade bs-modal-md" id="cardmodal" tabindex="-1" role="dialog" aria- 
  labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLongTitle">SELECT A CARD</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
     </div>
   
     <div class="modal-body">


                
                    <div class="mini-carousel">
                     <ul class="mini-item">
             <?php
    $cards = $card->load_category('WOMEN','WR');
    $category_products=$cards['category_products'];
    $num_rows = count($category_products); 
     if ($num_rows < 1) {
    echo '<div class="info">We shall update you when this is back in Stock</div>'; 
    ?>
        <a  onClick="pageModel(this);" href="javascript:void(0);" id="<?php echo 
      site_url('home/getview/contact_form/'.$categorynameID);  ?>" >Click here to submit your 
            contact to be updated</a>

      <?php    
    
       } else {

        
      foreach($category_products as $cp)
    {
    $status = $cp["status"];
    $product_quantity = $cp["quantity"];
    $notify_quantity = $cp["reorder_level"];
     $images = $this->home_m->get_product_images($cp['inventory_id'],true);     
    if($images){
           $image = $images[0];
      $image_name = $image["thumb"].'.'. $image["extension"];
        $image_source = $image['source'];
      $check_pic = DEFAULT_UPLOAD.'/'.$image_source.'/'.$image_name;
         $product_image = $image_name;
    }else{
     $product_image = '';
     }
        
        ?>

                <li class="product-item col-xs-12 col-sm-4 col-md-3"> 
                        <div class="product-inner">
                    <div class="product-thumb has-back-image zoom">
                <a  id="testd" data-id="<?php echo base_url($check_pic); ?>" data- 
      dismiss="modal" data-toggle="modal" onclick="addModalDetails()" href="#single_card_view">
     <? php
     if(($product_image != "") || (($product_image != NULL))) {

       if (file_exists($check_pic)) {  ?>
      <img id="cardimage" src="<?php echo base_url($check_pic); ?>"  alt="Product Image" ></img>
                                   
                                  
       <?php    } else {
          echo "<img class=\"img-fluid\" 
        src=\"http://geestar.co.tz/images/category/product.png\" alt=\"Product Image\" />";
        }

      } else {
      echo "<img class=\"img-fluid\" src=\"http://geestar.co.tz/images/category/product.png\" 
     alt=\"Product Image\" />";
      }

        ?>
       </a>
     </div>
       <div class="product-info">
                            <h6 id="cardname" class="product-name"><?=$cp["product_name"];?></a> 
   </h6>
                            <span class="price">
                                <ins id="cardprice">TZS <?=number_format($cp["selling_price"]);? 
              >
             </ins>
                            </span>

                        
                        </div>                    
     </div>
        </li>
                <?php
           }
      }
       ?>

这是我将值传递给另一个模态的 JS 代码

    function addModalDetails(){
     var name = $('#cardname').html();
  var image= $('#cardimage').html();
   var price =$('#cardprice').html();
   $('#heading').html(name);
   $('#cost').html(price);
    var imgsrc = $('#testd').data('id');
   $('#picture').attr('src',imgsrc);
    }

这是我想要传递数据的模态代码

 <div class="modal fade product_view" id="single_card_view">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <a href="#" data-dismiss="modal" class="class pull-right"><span class="glyphicon 
           glyphicon-remove"></span></a>
            <h3 id="heading" class="modal-title"></h3>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-6 product_img">
                    <img id="picture" src="" class="img-responsive">
                </div>
                <div class="col-md-6 product_content">
                   
                  
                    <p> <input id="gift_message" class="form-control" rows="5" placeholder="<? 
      php _l('Gift Message'); ?>" name="gift_message" > </input></p>
                    <h3 id="cost" class="cost"></span>TZS 
                <? =number_format($cp["selling_price"]);?></h3>
                    <div class="row">
              
                        <!-- end col -->
                    
                        <!-- end col -->
                  
                        <!-- end col -->
                    </div>
                    <div class="space-ten"></div>
                    <div class="btn-ground">
                        <button type="button" class="button" data-dismiss="modal" 
     onClick="addCardDetails()"> Add Card</button>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

您当前正在使用 foreach 循环将相同的 ID 分配给多个 html 标签。为简单起见，我将以 ID 为 cardimage 的 <img> 标签为例。此外，我想指出您的 ID 应始终为 unique!

问题

<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>

你在 $category_products 数组中循环的每个团队，你都在添加另一个标签，与上一个标签相同。

例如，如果您在 $category_products 数组中循环 3 次，您将获得 3 次相同的 ID。

<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<img id="cardimage" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>

当一个网页上有多个相同的 ID 时，您的 javascript 会选择它能找到的第一个，然后运行您的脚本会选择第一个，因为它只需要一个结果。要解决此问题，您应该使所有 ID's unique.

可能的解决方案

首先，让您的所有 ID 属性都独一无二。在您的循环中，您将 $category_products 作为 $cp 循环，并且您显然拥有变量 $cp['inventory_id']。我暂时将其作为此答案的唯一 ID。

您可以像这样在您的 ID 后面附加这个唯一 ID：

foreach($category_products as $cp) { ?>
    <img id="cardimage-<?=$cp['inventory_id']?>" src="<?php echo base_url($check_pic); ?>" alt="Product Image"></img>
<?php }

然后像这样更改您的 addModalDetails()：

function addModalDetails(id){
     var name = $('#cardname-'+id).html();
  var image= $('#cardimage-'+id).html();
   var price =$('#cardprice-'+id).html();
   $('#heading-'+id).html(name);
   $('#cost-'+id).html(price);
    var imgsrc = $('#testd-'+id).data('id');
   $('#picture-'+id).attr('src',imgsrc);
}

并这样称呼它：

addModalDetails(<?=$cp['inventory_id']?>);

我如何将多个变量传递给模态

How do i pass multiple Variables to a modal

php

jquery

bootstrap-modal