选择下拉菜单中的选项时，仅更改同一div内的图像 [英] Change only the image inside same div when option from dropdown is chosen

问题描述

我有一个嵌套表格，您可以在其中添加新手镯.对于每个手镯，您都可以选择一种颜色，然后在选择颜色的选择(下拉)旁边有一个图像，其中手镯上有该颜色.

I have a nested form where you can add new bracelets to your order. For each bracelet you can choose a color, and next to the select (dropdown) where you choose the color there is an image with the bracelet on that color.

问题是这样的:当我添加一个新的嵌套字段div(用于新手镯的表单)时，当我在下拉列表中选择一种颜色时，其旁边的图像不会改变.另外，当我在第一个手镯的下拉菜单中选择一种颜色时，所有手镯的图像都会更改为该颜色.

The problem is this: When I add a new nested-fields div (form for new bracelet), when I select a color in the dropdown the image next to it doesn't change. Also, when I select a color in the dropdown for the first bracelet, the images for all the bracelets change to that color.

这是我正在使用的JQuery，其中.product-still-form是图像.

This is the JQuery I'm using, where .product-still-form is the image.

jQuery(function($) {
  $(".bracelet-color-select").change(function(){
    $('.product-still-form').attr('src',$('.bracelet-color-select>option:selected').attr('src'));
  });
});

这是我的表单(它使用Rails和Simple_Form，并在嵌套部分加上Cocoon).

This is my form (it uses Rails and Simple_Form, plus Cocoon for the nested part).

<div class="nested-fields">
<p style="text-align: left;">Choose your QBracelet:</p>
<div class="row">
    <div class="col-sm-8 col-xs-12 form-fix-space-left">

      <div class="form-group form-input selected">
            <%= f.input :color, collection: [["Polished Silver", "Polished Silver", { src: (asset_path 'product-bracelet-polished-silver.png') }], ["Matte Silver", "Matte Silver", { src: (asset_path 'product-bracelet-matte-silver.png') }], ["Brushed Black", "Brushed Black", { src: (asset_path 'product-bracelet-brushed-black.png') }], ["Matte Black", "Matte Black", { src: (asset_path 'product-bracelet-matte-black.png') }], ["Polished Gold", "Polished Gold", { src: (asset_path 'product-bracelet-polished-gold.png') }]], 
                                                    include_blank: "Color", label: false, input_html: { class: 'bracelet-color-select' } %>         
        </div>
        <div class="form-group form-input">
            <%= f.input :size, collection: ["Small", "Medium", "Large"], include_blank: "Size", label: false %>
        </div>
        <div class="form-group form-input">
            <%= f.input :kind, collection: [['Lightning Connector (iPhone 5 and newer)', 'Lightning'], ["Micro USB (Android + Windows phones)",'Micro-USB']], include_blank: "Charger Type", label: false %>
        </div>
</div>
    <div class="col-sm-4 form-fix-space-right hidden-xs">
        <%= image_tag "product-bracelet-matte-silver.png", class: "product-still-form"%>
    </div>  

<%= link_to_remove_association "Remove Bracelet", f, class: "demon-link contact-us" %>
</div>

感谢您的帮助！我知道这里有很多代码:)

Thanks for any help! I know there is a lot of code here :)

推荐答案

您在文档加载时绑定了javascript.这就是为什么发生这种情况.您需要将其绑定到动态创建的元素上. Cocoon提供了将javascript绑定到动态生成的元素上的方法.

You are binding your javascript on document load. That's why this happening. You need to bind it on element created dynamically. Cocoon provide way to bind javascript on dynamic generated elements.

$('#container').on('cocoon:after-insert', function(e, insertedItem) {
  // ... do something
});

https://github.com/nathanvda/cocoon#callbacks-on-insert-and-and-remove-of-items 这里列出了所有回调事件.希望对您有帮助！

https://github.com/nathanvda/cocoon#callbacks-upon-insert-and-remove-of-items here list of all the call back events. Hope this help you!

这篇关于选择下拉菜单中的选项时，仅更改同一div内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！