Пытается сделать javascript применимым к нескольким изображениям?

Я пытаюсь заставить этот скрипт работать над более чем одним изображением на странице, что мне нужно сделать, чтобы изменить его, чтобы оно применимо к более чем «mapImg» и «img01». Я предполагаю, что это те области сценария, которые необходимо изменить ... Но это первые js, с которыми я работал ...Пытается сделать javascript применимым к нескольким изображениям?

Вы можете увидеть образец here. Я хочу, чтобы другие изображения на этой странице имели одно и то же поведение первого изображения при нажатии (притворяйтесь, что все они разные).

JavaScript:

// Get the modal 

    var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 

    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById("img01"); 
    var captionText = document.getElementById("caption"); 

    img.onclick = function() { 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 

// Get the <span> element that closes the modal 

    var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 

    span.onclick = function() { 
     modal.style.display = "none"; 
    }

HTML:

<!-- Trigger the Modal --> 
<img id="myImg" src="images/dt_sm.png" alt="Skateboarding in Portland Skidmore Old Town" > 

<!-- The Modal --> 
<div id="myModal" class="modal">` 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 

    <!-- Modal Content (The Image) --> 
    <img class="modal-content" id="img01"> 

    <!-- Modal Caption (Image Text) --> 
    <div id="caption"></div> 

</div>

Подробнее

Привет, Спасибо за ваши ответы. Я вижу, что часть моего вопроса выше была отрезана, и одна из ярлыков, которые я использовал, была неточной. Я должен подчеркнуть, что это первый Javascript, который я пытался изменить в своей жизни, и хотя я ценю предложение jQuery, я хотел бы получить мои знания сценария, с которым я работаю в данный момент под моим поясом, прежде чем я перейду на другие способы решения проблемы. Мне кажется, что этот сценарий настроен для работы только с одним стилем изображения css (myImg), и я хочу три или четыре (myImag, hisImag, theirImag и т. Д.). Сценарий также установлен для одной переменной изображения img01, и я хочу эффект 4 или 5 изображений на странице (img01, img02, img03 и т. д.), с тем же модальным стилем и действиями. Поэтому вместо копирования скрипта 4 или 5 раз и изменения переменных (и я не уверен, что вы можете сделать это на одной странице?), Я хочу, чтобы этот конкретный скрипт применим к нескольким наборам переменных на момент кажется жестким для одного? Я знаю, что они, вероятно, кажутся детскими шагами ... Но я боюсь, что сейчас я нахожусь в Javascript, поэтому, если вы отвечаете, помните, что я знаю только несколько предложений на языке, который вы говорите ... После следующего квартал я пойму этот материал намного лучше .... Спасибо за вашу помощь

источник

2016-11-22 dmengstrom

'id' должен быть уникальным ** ** – Weedoze

Ваш вопрос не очень понятно ... вы пытаетесь запустить тот же JavaScript на нескольких модальностей, или слегка модифицированную версию на различных модальностей? –

попробуйте использовать 'class' вместо' id' для изображений – pradeep1991singh

Используя jQuery, вы можете добиться переключения изображений.

<!DOCTYPE html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script> 
     $(document).ready(function(){ 
      $("#close01").click(function(){ 
       $("#img01").toggle(); 
      }); 

      $("#close02").click(function(){ 
       $("#img02").toggle(); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <!-- Trigger the Modal --> 
    <div id="myModal" class="modal"> 
     <span id="close01" >&times;</span> 
     <img class="modal-content" id="img01" src="img01.png"> 
    </div> 

    <div id="myModal" class="modal"> 
     <span id="close02" >&times;</span> 
     <img class="modal-content" id="img02" src="img02.png"> 
    </div> 
</body> 
</html>

источник

2016-11-22 15:31:21 shivam

Пытается сделать javascript применимым к нескольким изображениям?

ответ

Смежные вопросы