Ответы пользователя по тегу HTML
  • Как правильно копировать ячейки?

    @dexes56
    Back-end engineer
    https://jsfiddle.net/4aegcurp/

    Если вам нужно, чтобы значения ячеек менялись сразу же при выделении клеток, то вот код:
    $(document).ready(function () {
        var table = $('table');
        var cells = table.find('td');
        var firstCorner, secondCorner, val;
    
        function getCellIndex(cell) {
            return {
                x: $(cell).index(),
                y: $(cell).parent().index()
            };
        }
    
        function getRangeFromCorners(firstCorner, secondCorner, axis) {
            var from, to;
    
            if (firstCorner[axis] < secondCorner[axis]) {
                from = firstCorner[axis];
                to = secondCorner[axis];
            }
            else {
                from = secondCorner[axis];
                to = firstCorner[axis];
            }
    
            to = ':lt(' + ( to - from + 1 ) + ')';
    
            from = from > 0
                ? ':gt(' + ( from - 1 ) + ')'
                : '';
    
            return from + to;
        }
    
        function onSelectEnd() {
            cells.off('mouseover.selectRange');
            table.find('.selected')
                .removeClass('selected')
                .html(val);
        }
    
        cells.on('mousedown', function () {
            firstCorner = getCellIndex(this);
            secondCorner = getCellIndex(this);
            val = $(this).text();
    
            cells.each(function () {
                $(this).data('oldval', $(this).html());
            });
    
            cells.on('mouseover.selectRange', function () {
                secondCorner = getCellIndex(this);
    
                var rangeX = getRangeFromCorners(firstCorner, secondCorner, 'x');
                var rangeY = getRangeFromCorners(firstCorner, secondCorner, 'y');
    
                cells.filter('.selected').each(function () {
                    $(this).removeClass('selected')
                        .html($(this).data('oldval'));
                });
    
                table.find('tr' + rangeY).each(function () {
                    $(this).find('td' + rangeX)
                        .addClass('selected')
                        .html(val);
                });
            });
    
            $('body')
                .on('mouseup.removeCellListener', function () {
                    $(this).off('mouseup.removeCellListener');
                    onSelectEnd();
                })
                .on('mouseleave.removeCellListener', function () {
                    $(this).off('mouseleave.removeCellListener');
                    onSelectEnd();
                });
        });
    });
    Ответ написан
    Комментировать
  • Как следать переключатель класс .active в JS?

    @dexes56
    Back-end engineer
    Способов много, выбирайте любой:
    $(this).toggleClass('active');
    // ...
    if ($(this).hasClass('active'))
        $(this).removeClass('active');
    else
        $(this).addClass('active');
    // ...
    element.classList.toggle('active');
    // ...
    if (element.classList.contains('active'))
        element.classList.remove('active');
    else
        element.classList.add('active');


    В вашем случае вероятно:
    $(document).ready(function () {
        var loginBtn = $('#login-trigger');
        var signupBtn = $('#signup-trigger');
    
        loginBtn.click(function () {
            if (signupBtn.hasClass('active')) signupBtn.trigger('click');
    
            $(this).next('#login-content').slideToggle();
            $(this).toggleClass('active');
    
            if ($(this).hasClass('active')) $(this).find('span').html('▲')
            else $(this).find('span').html('▼');
        });
    
        signupBtn.click(function () {
            if (loginBtn.hasClass('active')) loginBtn.trigger('click');
    
            $(this).next('#signup-content').slideToggle();
            $(this).toggleClass('active');
    
            if ($(this).hasClass('active')) $(this).find('span').html('▲')
            else $(this).find('span').html('▼');
        })
    });
    Ответ написан