Использование JavaScript с HTML.BeginCollectionItem - PullRequest
Новая
       38

Использование JavaScript с HTML.BeginCollectionItem

0 голосов
/ 11 января 2019

Я использую HTML.BeginCollectionItem на веб-сайте, который продает подарочные коробки. Я использую его, чтобы позволить пользователям добавлять несколько подарочных коробок в заказ.

Пользователи выбирают изображение в верхней строке, и оно добавляется в их поле. Идентификатор элемента также добавляется в скрытое поле для обработки формы. Изображение этого продукта также становится серым и отключается, поэтому его нельзя добавить снова. Если они нажимают на элемент, который уже находится в их поле, он удаляется и возвращается в верхний список.

Как вы можете видеть ниже, я добавил два элемента в свою коробку, и они были выделены серым цветом в верхнем меню: enter image description here

Вот JavaScript, который контролирует это поведение: 

<script type="text/javascript">

    function changeImage(src, id, desc) {
        if (document.getElementById(id).className != "added") {
            for (var i = 1; i <= 5; i++) {
                if (document.getElementById("empty" + i).className != "item-full") {
                    document.getElementById("empty" + i).innerHTML = "<img src='" + src + "' width='60' height='60' id='"+id+"' onClick='removeImage(" + i + ")'/>";
                    document.getElementById("empty" + i).className = "item-full";
                    document.getElementById(id).className = "added";
                    document.getElementById("image-" + id).className = "image-inactive";
                    document.getElementById("Item" + i).value = id;
                    break;
                }
            }
        } 
    }

    function removeImage(x) {
        var e = document.getElementById("empty" + x).childNodes[0].id;
        document.getElementById("image-" + e).className = "image-active";
        document.getElementById(e).className = "available";
        document.getElementById("empty" + x).innerHTML = "<img src='../../Content/images/white.jpg' width=60 height=60 border=0 onClick='removeImage(" + x + ")'/>";
        document.getElementById("empty" + x).className = "empty-item";
    }

</script>

Все это прекрасно работает для одной коробки. Когда они добавляют вторую коробку, любые щелчки в списке потенциальных продуктов этой ячейки только выделяют их в первой строке. Следовательно, меню продукта и блок для 2-х (и более) блоков не затрагиваются.

Я думаю, что решение здесь состоит в том, чтобы получить GUID, назначенный каждому элементу с помощью HTML.BeginCollectionItem, и использовать его в функциях JavaScript, но я не уверен, как получить этот GUID.

Спасибо за любые идеи, которые вы можете предоставить!

...