Второй JavaScript не работает на той же HTML-странице Почему? - PullRequest
Новая
       14

Второй JavaScript не работает на той же HTML-странице Почему?

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

Может кто-нибудь помочь мне, пожалуйста, с этой проблемой у меня.

У меня есть этот сайт, на котором запрограммирована функция фотогалереи. Вы нажимаете одну кнопку со стрелкой, и она покажет следующее изображение в последовательности изображений. Нажмите предыдущую кнопку со стрелкой, и она покажет предыдущее изображение из последовательности. Данная веб-страница предназначена для настольных и мобильных устройств, поэтому ее макет будет отличаться в зависимости от того, на каком устройстве она установлена.

Функциональность фотогалереи отлично работает на мобильной версии сайта, но на настольной версии сайта она не будет переходить к следующему изображению в последовательности. Ниже приведен HTML-код рабочего стола для него 

var slideIndex = 1;
                showDivs(slideIndex);
                function plusDivs(n) {
                  showDivs(slideIndex += n);
                }

                function currentDiv(n) {
                  showDivs(slideIndex = n);
                }

                function showDivs(n) {
                    
                  var i;
                    
                  var x = document.getElementsByClassName("mySlides"); 
                    if (n > x.length) {slideIndex = 1} 
                    if (n < 1) {slideIndex = x.length} 
                    for (i = 0; i < x.length; i++) 
                    {
                        x[i].style.display = "none";
                    }
                    x[slideIndex-1].style.display = "block";  
                }
<div class="photoGallery" style="max-width:200%">

    <img class="mySlides" src="../Images/Guy_Fawkes_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Parent_of_Baby_in_Pram_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Vampire_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Werewolf_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Girl_School_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Boy_School_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Thief_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Christmas_Elf_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Santa_Claus_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Main_Character_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Old_Man_With_Stick_Walking_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Old_Lady_With_Shopping_Basket_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_&_Smoking_Cigarette.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Till_Monkey_Main_Menu_Title_Screen.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Old_Lady_with_Shopping_Basket_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Old_Man_With_Walking_Stick_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Main_Character_Putting_Cash_in_Till_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Main_Character_Tearing_Hair_Out_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Skiving_Employee_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Santa_Claus_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Christmas_Elf_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Thief_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_School_Boy_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_School_Girl_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Werewolf_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Parent_of_Baby_in_Pram_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Vampire_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Guy_Fawkes_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Main_Menu_Concept_Art.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Baby_Crying.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Christmas_Elf.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Guy_Fawkes.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Santa_Claus.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Boy_School.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Girl_School.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Thief.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Vampire.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Werewolf.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_Till_&_Money.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Main_Character_Tearing_Hair_Out.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Old_Main_Walking.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Hand.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Old_Man.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Old_Lady.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Skiving_Employee.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Skiving_Employee_Pic_2.jpg" style="width:100%">
    <div class="leftButton" onclick="plusDivs(-1)"><img src="../Images/DesktopleftArrow.jpg" alt="left arrow"></div>
    <div class="rightButton" onclick="plusDivs(1)"><img src="../Images/DesktoprightArrow.jpg" alt="left arrow"></div>
</div>
    <script src="../JavaScript/DESKTOP_Photo_Gallery.js"></script>

Mobile HTML of it:

    <div class="mobilephotoGallery" style="max-width:200%">

    <img class="mobilemySlides" src="../Images/Guy_Fawkes_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Parent_of_Baby_in_Pram_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Vampire_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Werewolf_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Girl_School_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Boy_School_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Thief_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Christmas_Elf_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Santa_Claus_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Main_Character_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Old_Man_With_Stick_Walking_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Old_Lady_With_Shopping_Basket_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_&_Smoking_Cigarette.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Till_Monkey_Main_Menu_Title_Screen.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Old_Lady_with_Shopping_Basket_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Old_Man_With_Walking_Stick_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Main_Character_Putting_Cash_in_Till_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Main_Character_Tearing_Hair_Out_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Skiving_Employee_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Santa_Claus_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Christmas_Elf_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Thief_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_School_Boy_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_School_Girl_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Werewolf_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Parent_of_Baby_in_Pram_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Vampire_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Guy_Fawkes_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Main_Menu_Concept_Art.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Baby_Crying.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Christmas_Elf.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Guy_Fawkes.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Santa_Claus.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Boy_School.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Girl_School.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Thief.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Vampire.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Werewolf.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_Till_&_Money.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Main_Character_Tearing_Hair_Out.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Main_Walking.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Hand.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Man.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Lady.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Skiving_Employee.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Skiving_Employee_Pic_2.jpg" style="width:100%">
    <div class="mobileleftButton" onclick="plusDivs(-1)"><img src="../Images/DesktopleftArrow.jpg" alt="left arrow"></div>
    <div class="mobilerightButton" onclick="plusDivs(1)"><img src="../Images/DesktoprightArrow.jpg" alt="left arrow"></div>
</div>
    <script src="../JavaScript/Mobile_Photo_Gallery.js"></script>

1 Ответ

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

Я вижу, что в вашем коде вы получаете элементы только с использованием класса "mySlides". 

var x = document.querySelectorAll(".mySlides");

Если вы хотите настроить таргетинг на элементы «mobilemySlides», вам нужно найти способ сообщить вашему javascript, какие элементы вы хотите получить.

Например, вы можете добавить второй параметр в вашу функцию 

function showDivs(n, selector){ ... }

А затем обновите запрос DOM: 

var x = document.querySelectorAll(selector);

Наконец, вызовите функцию showDivs: 

<div class="leftButton" onclick="plusDivs(-1, '.mySlides')">

Или 

<div class="leftButton" onclick="plusDivs(-1, '.mobilemySlides')">

Вот рабочий пример: https://codepen.io/mp-9007/pen/RdBwYb. Я убрал ширину на 100%, чтобы лучше видеть.

EDIT Обновленный код основан на комментарии @Scott Marcus. Изменено .getElementByClassName() на .querySelectorAll()

...