jQuery Hide/Show Within If/Else Statement Не работает

Question

Я работаю над быстрым слайд-шоу jQuery, и у меня возникают некоторые проблемы. У меня есть переменная, которая увеличивается или уменьшается при нажатии кнопок навигации, и код должен показывать или скрывать изображения на основе номера. Однако он не работает, только показывая img1 и не отображая никаких других изображений. Я проверил, что переменная currentImage изменяется правильно. Пожалуйста, дайте мне знать, что я делаю неправильно.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var currentImage = 0; 
    $("#next").click(function(){ 
     currentImage++; 
     if(currentImage > 2) 
     { 
      currentImage = 0; 
     } 
    }); 
    $("#previous").click(function(){ 
     currentImage--; 
     if(currentImage < 0) 
     { 
      currentImage = 2; 
     } 
    }); 
    if(currentImage == 0) 
    { 
     $(".img1").show(); 
    } 
    else 
    { 
     $(".img1").hide(); 
    } 
    if(currentImage == 1) 
    { 
     $(".img2").show(); 
    } 
    else 
    { 
     $(".img2").hide(); 
    } 
    if(currentImage == 2) 
    { 
     $(".img3").show(); 
    } 
    else 
    { 
     $(".img3").hide(); 
    } 
}); 
</script> 

Answer 1

Вы только запустить/Then/Else операторов, если один раз, при загрузке документа, необходимо перезапустить их после событий щелчка:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var currentImage = 0; 
    $("#next").click(function(){ 
     currentImage++; 
     if(currentImage > 2) 
     { 
      currentImage = 0; 
     } 
     refreshImg(); 
    }); 
    $("#previous").click(function(){ 
     currentImage--; 
     if(currentImage < 0) 
     { 
      currentImage = 2; 
     } 
     refreshImg(); 
    }); 
    function refreshImg(){ 
     if(currentImage == 0) 
     { 
      $(".img1").show(); 
     } 
     else 
     { 
      $(".img1").hide(); 
     } 
     if(currentImage == 1) 
     { 
      $(".img2").show(); 
     } 
     else 
     { 
      $(".img2").hide(); 
     } 
     if(currentImage == 2) 
     { 
      $(".img3").show(); 
     } 
     else 
     { 
      $(".img3").hide(); 
     } 
    } 
}); 
</script> 

Answer 2

Код отображения или скрытия изображения должны быть выполнены при нажатии кнопки. На данный момент он только скрывает или показывает кнопку на готовом документе.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     var currentImage = 0; 
     $("#next").click(function(){ 
      currentImage++; 
      if(currentImage > 2) 
      { 
       currentImage = 0; 
      } 
      ShowOrHideImage(); 
     }); 
     $("#previous").click(function(){ 
      currentImage--; 
      if(currentImage < 0) 
      { 
       currentImage = 2; 
      } 
      ShowOrHideImage(); 
     }); 

    function ShowOrHideImage() { 
     if(currentImage == 0) 
     { 
      $(".img1").show(); 
     } 
     else 
     { 
      $(".img1").hide(); 
     } 
     if(currentImage == 1) 
     { 
      $(".img2").show(); 
     } 
     else 
     { 
      $(".img2").hide(); 
     } 
     if(currentImage == 2) 
     { 
      $(".img3").show(); 
     } 
     else 
     { 
      $(".img3").hide(); 
     } 
    } 
    }); 
</script> 

Answer 3

Ваши условные операторы работают, как только документ будет готов, в то время значение currentImage равно 0. Вы можете вставить его в функцию и называть его каждый раз, когда есть Щелк

var toggleImages = function(current) { 

    if(current== 0) 
    { 
     $(".img1").show(); 
    } 
    else 
    { 
     $(".img1").hide(); 
    } 
    if(current== 1) 
    { 
     $(".img2").show(); 
    } 
    else 
    { 
     $(".img2").hide(); 
    } 
    if(current== 2) 
    { 
     $(".img3").show(); 
    } 
    else 
    { 
     $(".img3").hide(); 
    } 
}; 


$(document).ready(function(){ 
    var currentImage = 0; 
    $("#next").click(function(){ 
     currentImage++; 
     if(currentImage > 2) 
     { 
      currentImage = 0; 
     } 
     toggleImages(currentImage); 
    }); 
    $("#previous").click(function(){ 
     currentImage--; 
     if(currentImage < 0) 
     { 
      currentImage = 2; 
     } 
     toggleImages(currentImage); 
    }); 

}); 

Answer 4

ваш код должен быть:

$(document).ready(function(){ 
    currentImage = 0; 
     updateImgae(currentImage); 
    $("#next").click(function(){ 
     currentImage++; 
     if(currentImage > 2) 
     { 
      currentImage = 0; 
     } 
     updateImgae(currentImage); 
    }); 
    $("#previous").click(function(){ 
     currentImage--; 
     if(currentImage < 0) 
     { 
      currentImage = 2; 
     } 
     updateImgae(currentImage); 
    }); 
    function updateImgae(currentImage){ 
    if(currentImage == 0) 
    { 
     $(".img1").show(); 
    } 
    else 
    { 
     $(".img1").hide(); 
    } 
    if(currentImage == 1) 
    { 
     $(".img2").show(); 
    } 
    else 
    { 
     $(".img2").hide(); 
    } 
    if(currentImage == 2) 
    { 
     $(".img3").show(); 
    } 
    else 
    { 
     $(".img3").hide(); 
    } 
    } 
}); 

Answer 5

гораздо проще вариант - получить источник изображения, увеличить его или уменьшить его и заменить изображение с новым S сходный код. требует, чтобы изображения были названы 1.jpg, 2.jpg и 3.jpg и т. д. (и помещены в правильную папку - я использовал изображения/слайд-шоу/1.jpg и т. д.).

<!DOCTYPE html>      
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    </head> 
    <body> 
     <button type="button" value = "-1">Previous Image</button> 
     <img id="slideshowImage" src="images/slideshow/1.jpg" alt="Image 1" height="100" width="100"/> 
     <button type="button" value = "+1">Next Image</button> 

<script> 
    $(":button").click(function() { 
     var imageSrc=$('#slideshowImage').attr('src').split('/'); 
      var count = parseFloat(imageSrc[2]); 
      var newSrc = count+parseFloat(($(this).val())) 
       if(newSrc>3){newSrc=1}else{if(newSrc==0){newSrc=3}}; 
     $('#slideshowImage').attr('src','images/slideshow/'+newSrc+'.jpg').attr('alt','Image '+newSrc) 
      }); 
</script> 
</body> 
</html> 

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