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

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); 
    }); 

，如果我在选择选项点击，它会显示的fancybox颜色，我可以通过点击和选择的颜色选择颜色被显示在颜色的DIV元素到用户

但是，这只适用于第一次，如果我选择第二个产品的颜色，它的行为相应，但最终它会更新前一个沙发的颜色代码到新的。

假设我选择了颜色代码div元素（6）中写入的单座沙发的颜色。但是，当我选择第二张沙发，双座沙发的颜色代码时。它覆盖单人座沙发的颜色代码div元素以及（20）。

见1西特沙发的代码已被从改变（6）至（20）。同样，如果我选择3 Seater沙发的颜色，它将覆盖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代码

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

幸运的是，我找到了自己的解决方案

我的主要问题是，我是想从前端的颜色代码或我的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);  
    }); 

感谢所有那些谁对我的问题花费的时间并提出宝贵的建议。

Answer 2

你可以尝试链的方法，而不是嵌套他们像

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