Jquery изображение показать / скрыть не работает

Question

У меня в приложении предположительно простое задание jquery, которое меняет изображение в зависимости от того, по какой пиктограмме щелкают. HTML / erb выглядит следующим образом:

    <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/Airblades.png" id="#main1" class="main-image">
    <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/HU02+V+(Sprayed+Nickel).jpg" id="#main2" class="main-image hidden">
    <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/AB14+White+LV+(301854-01).jpg" id="#main3" class="main-image hidden">
    <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/WD05+Long+(247663-01).jpg" id="#main4" class="main-image hidden">
    <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/9kJ+Steel+Front.jpg" id="#main5" class="main-image hidden">

    <div class="row thumb-container">
      <div class="col">
        <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/Airblades.png" id="#thumb1" class="thumbnail active">
      </div> <!-- col -->
      <div class="col">
        <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/HU02+V+(Sprayed+Nickel).jpg" id="#thumb2" class="thumbnail">
      </div> <!-- col -->
      <div class="col">
        <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/AB14+White+LV+(301854-01).jpg" id="#thumb3" class="thumbnail">
      </div> <!-- col -->
      <div class="col">
        <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/WD05+Long+(247663-01).jpg" id="#thumb4" class="thumbnail">
      </div> <!-- col -->
      <div class="col">
        <img src="https://lagunagreenworks.s3-us-west-1.amazonaws.com/Images/9kJ+Steel+Front.jpg" id="#thumb5" class="thumbnail">
      </div> <!-- col -->
    </div> <!-- row -->

А jquery выглядит так:

<script>
  $(document).ready(function() {
    $("#thumb1").click(function(){
      $(".main-image").addClass("hidden");
      $(".thumbnail").removeClass("active");
      $("#thumb1").addClass("active");
      $('#main1').removeClass("hidden");
    });
    $("#thumb2").click(function(){
      $(".main-image").addClass("hidden");
      $(".thumbnail").removeClass("active");
      $("#thumb2").addClass("active");
      $('#main2').removeClass("hidden");
    });
    $("#thumb3").click(function(){
      $(".main-image").addClass("hidden");
      $(".thumbnail").removeClass("active");
      $("#thumb3").addClass("active");
      $('#main3').removeClass("hidden");
    });
    $("#thumb4").click(function(){
      $(".main-image").addClass("hidden");
      $(".thumbnail").removeClass("active");
      $("#thumb4").addClass("active");
      $('#main4').removeClass("hidden");
    });
    $("#thumb5").click(function(){
      $(".main-image").addClass("hidden");
      $(".thumbnail").removeClass("active");
      $("#thumb5").addClass("active");
      $('#main5').removeClass("hidden");
    });
  });
</script>

CSS на самом деле не влияет на проблему, так как работает нормально на начальной странице загрузки, но здесь это:

.product-page .main-image {
  max-width: 100%;
  max-height: 350px;
}

.product-page .thumb-container {
  position: absolute;
  bottom: 0;
  padding: 0 25px;
}

.product-page .thumbnail {
  max-height: 50px;
  max-width: 100%;
  padding: 5px;
  cursor: pointer;
}

.product-page .thumbnail.active {
  border: thin $color-light-grey solid;
}

Вот jsfiddle моей проблемы. Кто-нибудь может увидеть, что я делаю не так?

Answer 1

Итак, первая проблема, которую я вижу, это способ, которым вы ссылаетесь на элемент DOM. Вы используете:

$("#thumb2").click(function()...

$ ('# id') нотация ищет элемент с id = "id" Вы ищете элемент с id = "thumb2" , но в вашем коде есть элемент с id = "# thumb2"

Ты видишь это сейчас? Я не тестировал остальную часть кода, но это, безусловно, одна из проблем здесь.

Answer 2

Проблема в том, как вы определили идентификаторы в вашем html.

Например, у вас есть идентификатор, установленный как #thumb3

<img src="url.jpg" id="#thumb3" class="thumbnail">

Измените это на просто thumb3

<img src="url.jpg" id="thumb3" class="thumbnail">

С помощью CSS и jQuery вы получаете доступ к идентификаторам с помощью селектора #. После обновления это должно работать. Проверьте jsfiddle здесь .