Question

我正在构建和应用程序，它有一个定制的购物车。

我正在使用fancybox（ajax）来获取五种不同沙发类型（家具）的颜色代码。在fancybox从数据库加载内容（颜色）后，我可以为每种沙发类型选择并选择颜色。我已经将一个代码与我在变量（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);
  });

现在，如果我点击选择选项，它将显示带有颜色的花式框，我可以通过点击选择颜色，所选颜色显示在颜色的div元素中给用户

enter image description here

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

假设我选择了它在color-code div-element（6）中写入的Single-Seater沙发的颜色。但是当我选择第二张沙发的颜色代码时，双座沙发。它会覆盖Single-Seater沙发的颜色代码div元素以及（20）。

enter image description here

请参阅1座沙发的代码已从（6）更改为（20）。同样现在，如果我选择3座沙发的颜色，它将覆盖2座和1座沙发的颜色代码。

问题是，当产品选择了新颜色时，其他产品的先前颜色代码也会被最新的颜色代码覆盖。我认为问题就在这里

$('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 CODE

$(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时，它只更改/更新了特定的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的所有元素

2 个答案: