Как применить одну и ту же функцию к разным элементам div с одинаковым именем?

0

Когда я нажму на значок часового пояса, галочка появится правильно.

Однако, когда я применяю один и тот же формат div к другому разделу, галочка появится в первом div.

Это мой HTML и JavaScript:

<div class="hovertext"> <span class="video-txt">01:54</span>
    <span class="watch-later"><input type="image" onclick="showTick()" src="images/watchlater.jpg" /></span>
    <span id="tick" style="display:none;"><input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" /></span>
    <script type="text/javascript">
    function conceal() {
        if (document.getElementById('tick').style.display == 'block') {
            document.getElementById('tick').style.display = 'none';
        }
    }

    function showTick() {
        if (document.getElementById('tick').style.display == 'none') {
            document.getElementById('tick').style.display = 'block';
        }
    }

    function hideTick() {
        if (document.getElementById('tick').style.display == 'block') {
            document.getElementById('tick').style.display = 'none';
        }
    }
    </script>
</div>

Это выглядит так

Изображение 174551

Я хочу, чтобы это выглядело так. Как изменить JavaScript или div в строке, чтобы он не влиял на какой-либо другой div, но все же выполнял ту же функцию?

Изображение 174551

Пожалуйста, любая помощь будет оценена.

  • 0
    На странице может быть только один элемент с указанным идентификатором. Вы должны передать this функциям и пройти DOM до элемента, который вы желаете. Базовое руководство по программированию на JS / DOM поможет вам.
Теги:
function

1 ответ

0
Лучший ответ

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

Что-то вроде этого:

<div id="video1" class="hovertext">
    <span class="video-txt">01:54</span>
    <span class="watch-later">
        <input type="image" onclick="showTick()" src="images/watchlater.jpg" />
    </span>
    <span class="tick" style="display:none;">
        <input type="image" onclick="conceal()" onMouseOut="hideTick()" src="images/tick.jpg" />
    </span>
</div>

Ваш javascript также не должен включаться в каждый родительский div. Затем вы должны настроить целевой класс идентификатора, с которым вы взаимодействуете.

Поделиться
  • 0
    Привет большое спасибо за вашу помощь! Я пытался настроить таргетинг на класс «галочка» идентификатора, но, похоже, не активировал его. Я думаю, что-то не так с моим сценарием. Не могли бы вы помочь мне взглянуть? <script type = "text / javascript"> var divs = document.getElementsByClassName ("tick"); function conceal () {if (divs.style.display == 'block') {divs.style.display = 'none'; }} function showTick () {if (divs.style.display == 'none') {divs.style.display = 'block'; }} </ script>
  • 0
    @ user3534158 - я создал более подробный пример в скрипте , здесь: jsfiddle . Он включает в себя стили и JQuery. JQuery был использован для удобства, так как может быть несколько элементов класса CSS для манипуляции. Если вам нужен простой JavaScript, я могу принять следующий шанс,
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню