Javascript срабатывает только на одном из двух идентично названных элементов - PullRequest
Новая
       88

Javascript срабатывает только на одном из двух идентично названных элементов

0 голосов
/ 20 апреля 2020

Я пытался выяснить это и не могу действительно вникнуть в это; почему он не работает должным образом на обоих классах div.

Итак, у меня есть этот скрипт: 

        $('.form-field-sticky').on('click', (event) => {
        event.target.focus({preventScroll: true});
        const $changed = $(event.currentTarget);
        const toChange = $changed.attr('name');
        const changedVal = $changed.val();
        $('[name="product_id"]').parents('form').find(`[name="${toChange}"]`).val(changedVal).change();
    });

И я хочу настроить таргетинг на оба этих элемента: 

<div class="form-field-sticky" data-product-attribute="set-rectangle">
{{#each this.values}}
    <input
        class="form-radio-sticky"
        type="radio"
        id="attribute_rectangle__{{../id}}_{{id}}"
        name="attribute[{{../id}}]"
        value="{{id}}"
        {{#if selected}}
            checked
            data-default
        {{/if}}
        {{#if ../required}}required{{/if}}>
    <label class="form-option-sticky" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
        <span class="form-option-variant">{{this.label}}</span>
    </label>
{{/each}}

и 

<div class="form-field-sticky" data-product-attribute="swatch">


{{#each this.values}}
    <input class="form-radio-sticky" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_swatch_{{../id}}_{{id}}" {{#if selected}}checked data-default{{/if}} {{#if ../required}}required{{/if}}>
    <label class="form-radio-sticky" for="attribute_swatch_{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
        {{#if image}}
            <span class='form-option-variant form-option-variant--pattern' title="{{this.label}}" style="background-image: url('{{getImage image "swatch_option_size"}}');"></span>
        {{/if}}
        {{#if data.[2]}}
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[1]}}"></span>
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[2]}}"></span>
        {{else}}
            {{#if data.[1]}}
                <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
                <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[1]}}"></span>
            {{else}}
                {{#if data.[0]}}
                    <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
                {{/if}}
            {{/if}}
        {{/if}}
    </label>
{{/each}}

Но по какой-то причине он просто работает на первом, на «set-rectangle», и у меня нет Идея почему, когда оба класса одинаковы.

Я также попытался нацелить родительский div, и результат был таким же, скрипт работал только с одним из div, 'set-rectangle'.

Не могли бы вы помочь мне с этим?

Спасибо!

...