jQuery forEach () и функция change (), чтобы скрыть <select>и показать ввод

Question

У меня есть эта форма. Я работаю в Laravel, и проблема в том, что когда пользователь выбирает параметр в +10, он должен скрыть поле select и показывать поле input для каждого продукта в корзине.

<td class="text-center">
    <form action="{{ route('cart.update') }}" method="POST" id="QtyRefresh">
    @csrf

    @if($detail->quantity >= 10)
        <input type="number" name="quantity2" class="inputQty" id="qtyInput2" value="{{ $detail->quantity }}" autofocus>
    @else
        <select name="quantity" id="qtySelect{{ $detail->id }}" class="selectQty">
            <option {{old('quantity',$detail->quantity)=="1"? 'selected':''}} value="1">1</option>
            <option {{old('quantity',$detail->quantity)=="2"? 'selected':''}} value="2">2</option>
            <option {{old('quantity',$detail->quantity)=="3"? 'selected':''}} value="3">3</option>
            <option {{old('quantity',$detail->quantity)>="10"? 'selected':''}} value="+10">+10</option>
        </select>
    @endif

    <input type="hidden" name="cart_detail_id" id="cartId{{ $detail->id }}" value="{{ $detail->id }}">
    <input type="hidden" name="quantity" id="qtyInput{{ $detail->id }}" class="inputQty" value="{{ $detail->quantity }}" autofocus>
</td>

<td id="tdQtyForm">
    <a href="#" onclick="document.getElementById('QtyRefresh').submit()">
        <i class="material-icons" rel="tooltip" title="Actualizar Cantidad">refresh</i>
    </a>
</td>
</form>

jQuery

$(document).ready(function(){
    //var CartDetailId = '{{ $detail->id }}';
    var allSelect = document.querySelector("#CartTable").querySelectorAll("select");
    console.log(allSelect);

    allSelect.forEach(function(element){
        $(this).change(function()){
            if(element.value === '+10'){
                $('#qtySelect').remove();
                $('#qtyInput').attr('type', 'number').show().focus();
            }
        }
    });
});

Изображение таблицы продуктов

Answer 1

Нет необходимости использовать forEach() и добавлять обработчики событий для каждого отдельного выбора. Как для производительности, так и для простоты, лучше просто добавить один обработчик событий, который будет соответствовать каждому select, и заставить его работать и ориентироваться только на нужные элементы.

Ваш вопрос не определяет его, но из кода кажется, что у вас есть серия этих наборов select входов, каждый из которых имеет свой $detail->id. Поскольку ваши select и скрытые input, с которыми вы хотите работать, используют это значение идентификатора в их атрибутах HTML ID, мы можем использовать его для выбора нужных элементов.

Вот рабочий JSFiddle .

$(document).ready(function(){

    // Handle changes on *every* select on the page
    $('select').on('change', function() {

        // Find the id of the select that was changed
        var id = $(this).attr('id'); 

        // Find the $detail->id of the select that was changed
        var detailID = id.replace('qtySelect', '');

        // Check the value selected
        if ($(this).val() === '+10') {

            // Show the input field with the matching $detail->id
            $('#qtyInput' + detailID).attr('type', 'number').show().focus();

            // Hide the select.  If you .remove() it, you can't re-display it 
            // if the user changes their selection back to 9 for example.
            $(this).hide();
        }
    });
});

Некоторые примечания:

• Ваш код использует смесь чистых JS и jQuery. В этом нет ничего технически неправильного, но это, безусловно, затрудняет чтение и поддержку. Если вы собираетесь принять удар, включая jQuery (дополнительный запрос http, дополнительное время загрузки страницы и т. Д. c), и потрудитесь написать некоторый код jQuery, вы можете также использовать его и сделать код проще и более последовательный одновременно *. Ваш JS просто меняет представление, вот для чего CSS.

• Аналогичным образом, может быть, лучше просто скрыть выделенное, а не просто remove() это, но это вероятно, зависит от ваших требований.

• Наконец, для дальнейшего использования другим будет легче помочь, если вы сможете попытаться создать минимальный, полный и проверяемый пример . В вашем случае вопрос на 100% о jQuery. Нам не нужно видеть твой Клинок, PHP, Laravel. Все, что нам нужно, это ваш сгенерированный HTML. Точно так же #qtyInput2 не имеет отношения к делу, равно как и cart_detail_id, а также не относится к refre sh .... Чем проще вы можете сформулировать проблему, тем проще ее прочитать, понять и ответить на нее.