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;
}

这是我的问题的一个小问题。 谁能看出我做错了什么？

Answer 1

所以我看到的第一个问题是方式 您正在引用您正在使用的 DOM 元素：

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

$('#id'(表示法正在查找 id="id" 的元素 您正在寻找 id="thumb2" 的元素，但在您的代码中有一个id="#thumb2">的元素

你现在看到了吗？我没有测试其余代码，但这肯定是这里的问题之一。

Answer 2

问题在于您如何在html中定义 id。

例如，您将 id 设置为#thumb3

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

将其更改为仅thumb3

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

通过CSS和jQuery，您可以使用#选择器访问 ID。更新后，它应该可以工作。在这里检查jsfiddle。