• Как передать текущие данные с динамически созданного элемента в модальное окно?

    @Groshik_BY
    Что бы твой код работал как надо обработчик нажатия на изображение должен находиться в цикле (это называется "Замыкание").
    Ответ написан
  • Как реализовать изменение количества товаров в корзине?

    @Groshik_BY
    var id = $(this).data('id'),
    qty = $('.qty').val();

    Если я правильно понял, то элементы qty находятся в элементах update-cart и это значит, что нужно указать элемент qty более конкретно (не очень разбираюсь в jQuery, но наверное так)
    qty =$(this).find( $(".qty") ).val();
    Ответ написан
    Комментировать
  • Как сверстать интерактивное окно при клике на текст?

    @Groshik_BY
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pop-item {
                padding: 5px;
                background: #ff4413;
                color: white;
                z-index: 1;
                margin: 10px;
            }
            .pop-block {
                z-index: 2;
                background: #35415d;
                color: white;
                position: absolute;
                top: 100%;
                left: 0;
                padding: 10px;
            }
            .pop-block-close-panel {
                text-align: right;
            }
            .pop-block-close {
                font-size: 10px;
                padding: 5px;
                color: red;
            }
            .pop-text-block {
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div data-text="Pop 1" class="pop-item">POPBLOCK 1</div>
        <div data-text="Pop 2" class="pop-item">POPBLOCK 2</div>
        <div data-text="Pop 3" class="pop-item">POPBLOCK 3</div>
        <script>
            class Pop {
                event = 'click';
                closeEvent = null;
                class = '';
                parent = null;
                closeButtonStyle = closeButton => {};
                getText = item => { return ''};
                open = item => {};
                close = item => {};
    
                constructor() {
                }
    
                generate() {
                    let list = document.getElementsByClassName(this.class);
                    Array.prototype.forEach.call(list, pop => {
                        let popBlock = document.createElement('div');
                        let popBlockClosePanel = document.createElement('div');
                        let popBlockClose = document.createElement('div');
                        let popTextBlock = document.createElement('div');
                        this.closeButtonStyle(popBlockClose);
                        popBlock.classList.add('pop-block');
                        popBlockClosePanel.classList.add('pop-block-close-panel');
                        popBlockClose.classList.add('pop-block-close');
                        popTextBlock.classList.add('pop-text-block');
                        popTextBlock.innerText = this.getText(pop);
                        pop.addEventListener(this.event, e => {
                            if (e.target === pop)
                                this.open(popBlock);
                        });
                        if (this.closeEvent !== null) {
                            pop.addEventListener(this.closeEvent, e => {
                                this.close(popBlock);
                            })
                        }
                        popBlockClose.onclick = e => {
                            this.close(popBlock);
                        };
                        popBlockClosePanel.appendChild(popBlockClose);
                        this.close(popBlock);
                        popBlock.appendChild(popBlockClosePanel);
                        popBlock.appendChild(popTextBlock);
                        if (this.parent === null) {
                            pop.appendChild(popBlock);
                        }
                        else {
                            this.parent.appendChild(popBlock);
                        }
                    });
                }
            }
            document.addEventListener('DOMContentLoaded', () => {
                let popMenu = new Pop();
                popMenu.class = 'pop-item';
                popMenu.event = 'click';
                popMenu.closeEvent = 'mouseleave';
                popMenu.open = item => {
                    item.style.display = 'block';
                    let parent = item.parentElement;
                    item.style.top = parent.offsetTop + parent.offsetHeight + 'px';
                    item.style.left = parent.offsetLeft + 'px';
                };
                popMenu.close = item => {
                    item.style.display = 'none';
                };
                popMenu.closeButtonStyle = closeButton => {
                    closeButton.innerHTML = 'X';
                };
                popMenu.getText = item => {
                    return item.dataset.text;
                };
                popMenu.generate();
            });
        </script>
    </body>
    </html>
    Ответ написан
    3 комментария