Question

问题是当在模态上循环数据时，我的函数hide show无法正常工作我的代码有什么问题？有人可以帮助吗？

  $('#sectionChooser').change(function() {
    var myID = $(this).val();
    $('.gpanel').each(function() {
      myID === $(this).attr('id') ? $(this).show() : $(this).hide();
    });
  });

.gpanel {
    display: none;
  }
  
  #m1 {
    display: block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<?php foreach($produk as $prod) : ?>
<div class="modal fade" id="modalProd<?= $prod['produk_kode']; ?>" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content ">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
      </div>
      <div class="modal-body">
        <form action="<?= base_url();?>frontendc/addtocart" method="POST" name="cartForm">
          <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-12">
              <span class="gpanel btn btn-primary" id="m2">-5%</span>
              <div class="tab-content">
                <div id="pro-1" class="tab-pane fade show active">
                  <img src="<?= base_url().'assets/images/'.$prod['produk_gambar']; ?>" alt="">
                </div>
              </div>
            </div>
            <div class="col-md-7 col-sm-7 col-xs-12">
              <div class="modal-pro-content">
                <h3>
                  <?= $prod['produk_nama']; ?>
                </h3>
                <input type="hidden" name="produk_kode" value="<?= $prod['produk_kode'];?>">
                <div class="product-price-wrapper">
                  <span class="gpanel" id="m1"><?= "Rp. ".number_format($prod['produk_harga']); ?></span>
                  <span class="gpanel" id="m2"><?= "Rp. ".number_format($prod['produk_harga']-(($prod['produk_harga']*5)/100)); ?></span>
                  <span class="product-price-old gpanel" id="m2"><?= "Rp. ".number_format($prod['produk_harga']); ?></span>
                </div>
                <p>
                  <?= $prod['produk_ket']; ?>
                </p>
                <div class="quick-view-select">
                  <div class="select-option-part">
                    <label>Ukuran</label>
                    <select class="select" name="ukuran" id="sectionChooser">
                      <option value="m1">1 Meter</option>
                      <option value="m2">2 Meter</option>
                    </select>
                  </div>

当我检查问题时，隐藏和显示仅适用于第一个模态，但不适用于下一个模态。问题就像他们不阅读身份证一样。也许我必须在我的JavaScript上放一些uniqe ID？有人可以帮我吗？

for fiddle

第一模态

第三模态

当我将select更改为“ 2 papan”时，您会在图像1上看到数据模式1，结果是折扣将出现在顶部图像上，同时还将出现“行使价”

但在带有模式3的图片2上，折扣和“行使价”未显示在其中

Answer 1

由于您的代码处于foreach循环中，因此您需要为每个块使用不同的ID

<select class="select sectionChooser" name="ukuran" data-id="<?= $prod['produk_kode']; ?>" id="sectionChooser<?= $prod['produk_kode']; ?>">

在这里，我添加了sectionChooser类来选择下拉菜单，因此请按如下所示更改脚本：

$('.select').change(function() {
  var myID = $(this).val();
  var dataID = $(this).attr('data-id');
  $('#modalProd'+dataID+' .gpanel').each(function() {
     (myID === $(this).attr('id')) ? $(this).show() : $(this).hide();
  });
});

隐藏和显示选择选项不适用于模式

1 个答案: