Форум

laimas · #11 (**permalink**) 14.05.2019, 16:36

Сообщение от Янковиц

будет ли скрипт работать, если нужно проверить 1-2 блока радиокнопок, а 3-ий блок опция - select?

Ну одновременно события изменения кнопок и списка конечно же не наступят, но если речь идет об одном обработчике, то конечно же это можно описать.

laimas · #12 (**permalink**) 14.05.2019, 16:42

Сообщение от Янковиц

В перспективе будет от 0 до 10-15 наборов радиокнопок и селектов вперемешку.

Это ни о чем не говорит. Вам уже намекали ранее о битовом наборе. В SQL это тип SET. Его значения это текст, а внутренне представление, это битовый набор. Естественно, что каждый из 64 таких наборов будет уникальным значением. Если ваш объект описать как значения с ключами таких битовых наборов, а значения кнопок (опций списка) содержат соответствующий бит набора, то сложив биты выбранных кнопок и опций можно легко получить нужное.

рони · #13 (**permalink**) 14.05.2019, 16:45

Янковиц,
... вариант

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    var DATA = {
        "variable": [{
            "item_id": 19,
            "item_image": "",
            "item_variation": {
                "steklo": "\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435",
                "material": "\u043c\u0435\u0442\u0430\u043b\u043b"
            },
            "item_price": "110"
        }, {
            "item_id": 20,
            "item_image": "",
            "item_variation": {
                "steklo": "\u043e\u0431\u044b\u0447\u043d\u043e\u0435",
                "material": "\u043c\u0435\u0442\u0430\u043b\u043b"
            },
            "item_price": "130"
        }, {
            "item_id": 21,
            "item_image": "",
            "item_variation": {
                "steklo": "\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435",
                "material": "\u043f\u043b\u0430\u0441\u0442\u0438\u043a"
            },
            "item_price": "150"
        }, {
            "item_id": 22,
            "item_image": "",
            "item_variation": {
                "steklo": "\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435",
                "material": "\u0434\u0435\u0440\u0435\u0432\u043e"
            },
            "item_price": "160"
        }, {
            "item_id": 23,
            "item_image": "",
            "item_variation": {
                "steklo": "\u043e\u0431\u044b\u0447\u043d\u043e\u0435",
                "material": "\u043f\u043b\u0430\u0441\u0442\u0438\u043a"
            },
            "item_price": "175"
        }, {
            "item_id": 24,
            "item_image": "",
            "item_variation": {
                "steklo": "\u043e\u0431\u044b\u0447\u043d\u043e\u0435",
                "material": "\u0434\u0435\u0440\u0435\u0432\u043e"
            },
            "item_price": "199"
        }]
    };
$(function() {
var sel = ['steklo','material'];
$('#buy').on('change', function() {
var form = this;
var data = sel.reduce(function(obj, variation) {
obj[variation] = form[variation].value
return obj
},{})
var findElem = DATA.variable.filter(function(elem) {
return JSON.stringify(elem.item_variation) == JSON.stringify(data)// лучше цикл по sel
})
var id = '', price = '';
if(findElem.length)  {
   id =  findElem[0].item_id;
   price = findElem[0].item_price
}
$('[name="price"]').val(price);
$('[name="product-id"]').val(id);
})

});
    </script>
</head>

<body>
<form id="buy" action="" method="post" >
    <div class="variations">
        <input type="radio" id="material-1" value="металл" name="material">
        <label class="variations__item" for="material-1">металл</label>

        <input type="radio" id="material-2" value="пластик" name="material">
        <label class="variations__item" for="material-2">пластик</label>

        <input type="radio" id="material-3" value="дерево" name="material">
        <label class="variations__item" for="material-3">дерево</label>
        <div class="error">Пожалуйста, выберите "Материал"</div>
    </div>

    <div class="variations">
        <input type="radio" id="steklo-1" value="ударопрочное" name="steklo">
        <label class="variations__item" for="steklo-1">ударопрочное</label>

        <input type="radio" id="steklo-2" value="обычное" name="steklo">
        <label class="variations__item" for="steklo-2">обычное</label>
    </div>

    <div class="buy__btn">
        <input  value="100" name="price">
        <input  value="12" name="product-id">
        <input class="buy__btn_submit" type="submit" value="В корзину" data-click="Оформить">
    </div>
</form>

</body>
</html>

Янковиц · #14 (**permalink**) 14.05.2019, 16:48

Ох, не дорос я ещё до этого.

laimas · #15 (**permalink**) 14.05.2019, 16:56

Обратите внимание еще раз на то, о чем вы спрашивали - "если более ...". Я и написал код под ваш конкретно набор, которой собственно описать можно проще - есть некие наборы в объекте и элементы управления, при этом их количество равно. Код проверяет - если выбрано два элемента, то производится поиск. Вы пишите, что их возможно будет более, значит встает вопрос - поиск возможен если выбрано меньше элементов чем элементов набора (выбрать все подходящие) или только если выбраны все элементы (искать одно уникальное значение)?

Янковиц · #16 (**permalink**) 14.05.2019, 17:07

Если выбраны все элементы сразу. Если 3 набора, значит должны быть обязательно выбраны все три. И так далее.

Янковиц · #17 (**permalink**) 14.05.2019, 17:08

Поиск одного уникального значения

laimas · #18 (**permalink**) 14.05.2019, 17:53

Предложение от рони не подходит?

Сообщение от Янковиц

не дорос я ещё до этого

Ничего сложного в этом нет. Насколько я понимаю, объект DATA это данные из базы, которые описывают все возможные наборы, так? А если так, то это крайне не удобно для выбора. Тип SET как раз представляет возможность описать множество битовым набором. Правда есть один неприятный момент в таком типе. Нельзя проста так удалить из набора ранее объявленное, так как изменятся значения у записей ранее им определенные этим набором.

К примеру, в базе будет храниться набор с типом SET: "один", "два", "три". Битовые значения их будут равны

один - 001
два - 010
три - 100

то есть десятичные значения наборов по порядку будут равны: 1, 2, 4, 8, ...

Если эти значения будут к примеру у списка со множественным выбором, то сложив значения всех выбранных опций (операция битовое ИЛИ) получим выбор пользователя. К примеру, если будет выбрана первая и последняя опция, значит это будет 101 = 5 десятичному. А при записи/выборке в базе можно оперировать как битовым так и текстовым набором.

Янковиц · #19 (**permalink**) 15.05.2019, 15:46

Прошу прощения, что поднимаю вопрос снова. Вариант Рони хорош, но там есть зависимость от последовательности.
То есть, если var sel = ['material','steklo'];
Скрипт отказывается работать.
Что касается битового набора, я попытался поискать, но ничего не понял.

Янковиц · #20 (**permalink**) 15.05.2019, 15:51

Что касается варианта:

$(function() {
    var btn = $('#buy :radio').change(function() {
        var a = this, b = btn.not(this).filter(':checked')[0], f = {}
        if(b) {
            $.each(DATA.variable, function() {
                if(this.item_variation[a.name]==a.value && this.item_variation[b.name]==b.value)
                f.id = this.item_id;
                f.img = this.item_image;
                f.price = this.item_price;
            });
            console.log(f);
        }
    });
});

Не могу понять, почему id меняется, а price и img остаётся прежними.

Форум

Справочник

Discord чат

Курсы javascript