Javascript - скрипт не работает при втором клике - PullRequest
Новая
       11

Javascript - скрипт не работает при втором клике

0 голосов
/ 03 апреля 2020

базовый c вопрос новичка…

Я всегда сталкиваюсь с одной и той же проблемой: я часто хочу, чтобы элемент «A» показывал элемент «B» при нажатии, когда «B» скрыт, но скрыть это, когда это видно. Вот две разные попытки, которые не работают: 

    let ref = document.getElementsByTagName('sup');
    let refContent = document.getElementsByTagName('i');
    
    for(let i = 0; i < ref.length ; i++) {
        ref[i].addEventListener('click', function() {
            if (refContent[i].style.display == "inline") {
                refContent[i].style.display = "none";
            } else {
                refContent[i].style.display = "none";
            };
        });
    }

let ref = document.getElementsByTagName('sup');
let refContent = document.getElementsByTagName('i');

for(let i = 0; i < ref.length ; i++) {
    if (refContent[i].style.display == "") {
        ref[i].addEventListener('click', function() {
            refContent[i].style.display = "inline";
        });   
    } else {
        ref[i].addEventListener('click', function() {
            refContent[i].style.display = "none";
        });   
    }
}

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Привет

Я собираюсь изменить некоторые имена переменных, чтобы об этом было легче говорить. Итак, вы начинаете с сильного 

    // get all elements with tag sup
    let buttons = document.getElementsByTagName('sup'); 
    //get all elements with tag i
    let showables = document.getElementsByTagName('i');

Для каждого элемента buttons мы хотим связать прослушиватель события onclick . showables должен отвечать на эти клики. Вы пишете 


    //for every `button` bind this `event listener`
    buttons[i].addEventListener('click', function() {
        if (showable[i].style.display == "inline") {
            showable[i].style.display = "none";
        } else {
            showable[i].style.display = "none";
        };
    });
}

Чтобы сделать это немного более понятным, давайте возьмем function и дадим ему имя 

let show_hide = function(i) {
        if (showable[i].style.display == "inline") {
            showable[i].style.display = "none";
        } else {
            showable[i].style.display = "none";
        };
});

//for each button, bind show_hide
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', show_hide(i))
}

l oop там делает именно то, что вы ' буду ожидать; он связывает show_hide с каждым button. Что делает show_hide? 

    //if the element is shown, hide it
    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    //if the element is not shown, hide it
    } else {
        showable[i].style.display = "none";
    };

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

    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    //if not shown, show
    else {
****    showable[i].style.display = "inline";
    };

Если сложить все вместе, это должно сработать 

let show_hide = function(i) {
    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    } else {
        showable[i].style.display = "inline";
    };
});

//for each button, bind show_hide
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', show_hide(i))
}

Если вы хотите, чтобы мое решение этой проблемы было бы более готовы решить эту проблему по-своему. Прокомментируйте и дайте мне знать! Надеюсь, это поможет

fin

0 голосов
/ 03 апреля 2020

Я буду интерпретировать то, что вы написали, но у меня нет полного кода. Я исправлю некоторые проблемы и обновлю, если / когда вы обновите свой код, добавив разметку (html).

Вам следует Поместите выбранные элементы в массив, потому что некоторые браузеры не позволят вам l oop над NodeLists. Вы можете изменить NodeLists в массив несколькими способами, которые мне нравятся Array.From(). После изменения NodeLists в массив вы можете безопасно l oop поверх элементов в массиве, используя forEach() l oop. 

let ref = Array.from(document.getElementsByTagName('sup'));
let refContent = Array.from(document.getElementsByTagName('i'));
ref.forEach(el => {
    el.addEventListener('click', e => {
        e.target.getElementsByTagName('i').style.display = '' // do something
    });
});

Этот фрагмент, скорее всего, не будет работать как есть, Мне не хватает информации, чтобы закончить sh этот сценарий, но, возможно, это хорошая отправная точка для дальнейшего изучения. (Ищите вещи и добавляйте 'mdn', чтобы получить хорошие результаты).

Вместо прямого изменения стиля элемента лучше либо добавить, либо удалить класс css, который содержит css свойства, которые вы желаете. Вы также можете переключить класс: element.toggle('className).

...