Понимание функции .toggle и скрытие / скрытие кнопок - PullRequest
Новая
       38

Понимание функции .toggle и скрытие / скрытие кнопок

0 голосов
/ 27 марта 2019

У меня есть область ввода текста, которая разбивает строку в массив и делает из нее кнопки для каждого слова. Я хочу, чтобы можно было скрывать каждое слово отдельно от кнопки («щелчок») на кнопке. Я пытался использовать функцию Jquery.toggle, но она скрывает все мои кнопки. Я не могу заставить их вновь появиться. Есть ли способ потушить их, спрятать и показать их.

Я уже пробовал искать в интернете. На самом деле не мог прийти к решению, на самом деле рассматривал возможность написания своего собственного переключателя, но это просто кажется неправильным. Это единственный способ, которым вы можете использовать переключатель, чтобы фактически иметь статическую кнопку, которая нажимается, чтобы скрыть или показать фрагмент кода.

Совершенно странно иметь возможность показывать то, что скрыто, когда нет кнопки, которая показывает / скрывает все. 

    let createText=$('<textarea/>', {
        'id':'Text',
        'placeholder':'Text',
        'class':'form-control col col-md-5',
        'rows':'10'
    }).on("input", function() {
        let woorden = $(this).val().split(/(\s)/g);
        $('#outputButtons').empty();
        for (let i = 0; i < woorden.length; i++) {
            if (woorden[i].replace(/\s/g, "") != "") {
                let outputBtn=$('<button/>', {
                    'class': 'btn btn-secondary mt-2 mr-2'
                }).html(woorden[i])
                $('#outputButtons').append(outputBtn);                        
            }
        }
    });

    let outputButtons = $('<div/>', {
        'class':'col',
        'id':'outputButtons'
    }).on('click', function() {
        $('#outputButtons').toggle(1000); 

    });

Как бы я поступил, на самом деле скрывая / скрывая кнопки, отделенные друг от друга. Это возможно без статической кнопки, которая показывает / скрывает все?

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

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Вы можете попробовать это в своем коде:

Напишите следующий класс css: 

.hide{
opacity: 0;
}

Затем нажмите на кнопки вывода (функция «при нажатии»): 

$(this).toggleClass("hide")
0 голосов
/ 27 марта 2019

Вам не нужно использовать переключатель для кнопок!

Добавьте этот класс к кнопкам, которые вы хотите отключить 

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Для изменения статуса вы можете использовать jquery 

$("#id").toggleClass('disable');
...