相同的值分配给具有不同 id 的所有元素

Question

我正在构建具有自定义购物车的应用程序。

我正在使用 fancybox (ajax) 获取五种不同沙发类型（家具）的颜色代码。在 fancybox 从数据库加载内容（颜色）后，我可以为每种沙发类型选择 select 颜色。我已将代码关联到我在变量 (colorCode) 中获取的每种颜色。我可以从 html 页面获取颜色代码，代码是

$('body').on('click', '.margin', function() {
    // Get the code of selected Color
    colorCode= $(this).children('.color-code').text();

  //Write the selected color-code in the div-element on frontend so that user can see the selected color code. 
    $('#'+selectedIdCode).empty().text(colorCode);
  });

现在，如果我单击 select 选项，它将显示带颜色的花式框，我可以通过单击它们来 select 颜色，并且 selected 颜色显示在颜色的 div 元素给用户

但这只适用于第一次，如果我为第二个产品选择 select 颜色，它会相应地表现，但最后它会将之前沙发的颜色代码更新为新的。

假设我 select 编辑了它在颜色代码 div-元素 (6) 中写入的单座沙发的颜色。但是当我 select 第二张沙发的颜色代码时，双座沙发。它也将单座沙发的颜色代码 div 元素覆盖为 (20)。

看到1人座沙发的代码已经从(6)改成了(20)。同样，现在如果我 select 3 人座沙发的颜色，它将覆盖 2 人座和 1 人座沙发的颜色代码。

问题是，每当为产品 select 编辑新颜色时，其他产品之前的颜色代码也会被最新的颜色代码覆盖。我认为问题出在这里

$('body').on('click', '.margin', function() {

样本HTML代码

 <td>
    <div class="btn-group select-color-minwidth">
      <div class="btn" id="1seater-code">Select Color</div>
        <a class="code-selector fancybox.ajax btn" id="1seater">                          
            <i class="fa fa-pencil"></i>                           
        </a>
    </div>                    
  </td>

  <td>
    <div class="btn-group select-color-minwidth">
      <div class="btn" id="2seater-code">Select Color</div>
        <a class="code-selector fancybox.ajax btn" id="2seater">                          
            <i class="fa fa-pencil"></i>                           
        </a>
    </div>                    
  </td>
  <td>
    <div class="btn-group select-color-minwidth">
      <div class="btn" id="3seater-code">Select Color</div>
        <a class="code-selector fancybox.ajax btn" id="3seater">                          
            <i class="fa fa-pencil"></i>                           
        </a>
    </div>                    
  </td>

jQUERY 代码

$(document).ready(function() {

   $('.code-selector').click(function(){    
        var colorCode; 
        //Which category is clicked   1 Seater or 2 Seater or 3 Seater etc
        var selectedId = $(this).attr('id');
        //The id of the Div-Element where the value for selected code will be displayed
        var selectedIdCode = selectedId+'-code';

     $(".code-selector").fancybox({
        padding:10,
        margin:100,
        openEffect : 'elastic',
        openSpeed  : 150,
        closeEffect : 'elastic',
        closeSpeed  : 500,
        closeClick : false,
        href : 'fancyboxajax.php',
        helpers : {
          overlay : null
        } 
      });

     $('body').on('click', '.margin', function() {
        // Get the code of selected Color
        colorCode= $(this).children('.color-code').text();

        //Update the selected Color code
        $('#'+selectedIdCode).empty().text(colorCode);
      });
    });  
});

最后 FANCYBOXAJAX.PHP

 <script type="text/javascript">
  $('.margin').click(function(){    

     //Remove selection from other and apply to the Current one
     $('.selected').css('display','none');
     $(this).children('.selected').css('display','block');      

     // Show the save button
     $('.save-button').css('display','block');      

     // take user to Save button
     $(".fancybox-inner").animate(
        { scrollTop: 0 },
        {
          duration: 100,
          easing: 'linear'
     });      

     // Close the Fancy box
     $('#close-njk').click(function() {
        $.fancybox.close();    
     });
  });
 </script>


    <div class="tiles">
      <p>Select  any color and click on save Button, Below</p>

      <div class="save-button">
        <button class=" col-3 btn btn-primary " id="close-njk">Save</button>
      </div>

      <?php

        $db->set_table('raw_material');
        $results = $db->all();

        foreach ($result as $result) {

          echo '<div class="margin">
          <div class="selected"><img src="check_success-64.png"></div>
          <img class="njk-img"  src="gallery/raw_material_tiles_2/'.$result['material_name'].'.jpg" width="100" height="75">
          <div style="display:none" class="color-code">'.$result['id'].'</div>
          </div>';
        }

      ?>

    </div>

感谢您在这方面提供的任何帮助。

谢谢

Answer 1

您可以尝试链接方法而不是嵌套方法

jQuery(document).ready(function ($) {
    $('.code-selector').click(function () {
        var colorCode;
        //Which category is clicked   1 Seater or 2 Seater or 3 Seater etc
        var selectedId = this.id;
        //The id of the Div-Element where the value for selected code will be displayed
        var selectedIdCode = selectedId + '-code';
        alert(selectedId);
    }).fancybox({
        // fancybox options
    });
}); // ready

请注意变量仅在 click 方法中可用，但您可以在全局范围内声明它们以使其他方法可以访问它们

见JSFIDDLE

Answer 2

幸运的是我找到了它的解决方案

我的主要问题是我试图从前端或我的 Html 页面获取颜色代码。但当我尝试从 fancyboxajax.php 页面访问 id 时，它 changed/updated 只有特定的 id 而不是所有的 id。所以我将 id 作为变量传递给 fancybox，并从加载到 fancybox 的页面中将颜色代码分配给特定的 id。

这里是代码说明

 $(document).ready(function() {    
  $('.code-selector').click(function(){
    var colorCode; 
    //Which category is clicked   1 Seater or 2 Seater or 3 Seater etc
    var selectedId = $(this).attr('id');
    //The id of the Div-Element where the value for selected code will be displayed
    var selectedIdCode = selectedId+'-code';
    //Get the respective selected option id
    var selectedOption = '#'+selectedId+'-option';
    //Get the respective selected option id value
    var selectedOptionValue = $(selectedOption).find(":selected").attr('value');      
    $(".code-selector").fancybox({
      padding:10,
      margin:100,
      openEffect : 'elastic',
      openSpeed  : 150,
      closeEffect : 'elastic',
      closeSpeed  : 500,
      closeClick : false,
      href : 'fancyboxajax.php?code='+selectedIdCode+'&option='+selectedOptionValue,
      helpers : {
        overlay : null
      }
    });
  });
});

和fancyboxajax.php页面分别

var code ="<?php echo $_GET['code']; ?>";
  var option = "<?php echo $_GET['option']; ?>";
  // Close the Fancy box
  $('#close-njk').click(function() {
    $.fancybox.close(); 
    $('#'+code).text(color);  
    $('#'+code+'-color').val(color);      
  });

感谢所有花时间解答我的问题并提出宝贵建议的人。

相同的值分配给具有不同 id 的所有元素

same value is assigned to all elements that have different id

javascript

jquery

fancybox