jquery - JQuery 根据点击显示带有 id 的图像(取 2)
问题描述
几个月前我问了这个问题。我想添加一个具有不同背景的相同 div。我想知道为什么 jQuery 在第二个 div 中不起作用?我看到图像仅在第一个 div 中显示和隐藏,即使我单击第二个 div 中的小图像也是如此。
$('#seatColors img, #frameColors img').click(function(e) {
let target = e.target.id.includes('seat') ? 'seat' : 'frame'
$('.' + target).hide();
$('#' + e.target.id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')).show().addClass('color-overlay');
console.log(target, '#' + e.target.id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame'))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="visualizer">
<div id="chairContainer">
<img src="/sites/default/files/color-visualizer/background.jpg" class="background">
<img src="/sites/default/files/color-visualizer/seatback-red.png" id="redBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-black.png" id="blackBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-blue.png" id="blueBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-teal.png" id="tealBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-white.png" id="whiteBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-ww.png" id="wwBack" class="seat">
<img src="/sites/default/files/color-visualizer/frame-red.png" id="redFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-black.png" id="blackFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-blue.png" id="blueFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-teal.png" id="tealFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-white.png" id="whiteFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-ww.png" id="wwFrame" class="frame">
</div>
<div class="intro">
<p>Select a seat and back color</p>
<div id="seatColors">
<img src="/sites/default/files/color-visualizer/red.png" class="seatColor" id="seatRed">
<img src="/sites/default/files/color-visualizer/black.png" class="seatColor" id="seatBlack">
<img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" id="seatBlue">
<img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" id="seatTeal">
<img src="/sites/default/files/color-visualizer/white.png" class="seatColor" id="seatWhite">
<img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" id="seatWw">
</div>
<p>Select a frame color</p>
<div id="frameColors">
<img src="/sites/default/files/color-visualizer/red.png" class="frameColor" id="frameRed">
<img src="/sites/default/files/color-visualizer/black.png" class="frameColor" id="frameBlack">
<img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" id="frameBlue">
<img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" id="frameTeal">
<img src="/sites/default/files/color-visualizer/white.png" class="frameColor" id="frameWhite">
<img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" id="frameWw">
</div>
</div>
</div>
<div id="visualizer">
<div id="chairContainer">
<img src="/sites/default/files/color-visualizer/scene21/background.jpg" class="background">
<img src="/sites/default/files/color-visualizer/scene21/red-seats.png" id="redBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/black-seats.png" id="blackBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/blue-seats.png" id="blueBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/teal-seats.png" id="tealBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/white-seats.png" id="whiteBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/ww-seats.png" id="wwBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/red-frame.png" id="redFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/black-frame.png" id="blackFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/blue-frame.png" id="blueFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/teal-frame.png" id="tealFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/white-frame.png" id="whiteFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/ww-frame.png" id="wwFrame" class="frame">
</div>
<div class="intro">
<p>Select a seat and back color *</p>
<div id="seatColors">
<p><img src="/sites/default/files/color-visualizer/red.png" class="seatColor" id ="seatRed"><br>Red</p>
<p><img src="/sites/default/files/color-visualizer/black.png" class="seatColor" id ="seatBlack"><br>Black</p>
<p><img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" id ="seatBlue"><br>Blue</p>
<p><img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" id ="seatTeal"><br>Teal</p>
<p><img src="/sites/default/files/color-visualizer/white.png" class="seatColor" id ="seatWhite"><br>White</p>
<p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" id ="seatWw"><br>Weatherwood</p>
</div>
<p>Select a frame color *</p>
<div id="frameColors">
<p><img src="/sites/default/files/color-visualizer/red.png" class="frameColor" id ="frameRed"><br>Red</p>
<p><img src="/sites/default/files/color-visualizer/black.png" class="frameColor" id ="frameBlack"><br>Black</p>
<p><img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" id ="frameBlue"><br>Blue</p>
<p><img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" id ="frameTeal"><br>Teal</p>
<p><img src="/sites/default/files/color-visualizer/white.png" class="frameColor" id ="frameWhite"><br>White</p>
<p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" id ="frameWw"><br>Weatherwood</p>
</div>
<p>*The color shown on page load is a placeholder gray. It is not one of the colors available for purchase. This is for visualization purposes only. The actual colors may not appear exactly the same. <a href =/dealer-locater">Find and visit a dealer to see the products.</a></p>
</div>
</div>
解决方案
如果你的代码有效,我建议你不要有两套。如果您坚持更改非常具有侵入性
这是我到目前为止所做的。请注意,我使用的是 class 和最接近的,因此我将所有 DIV ID 更改为 class,并将图像上的所有 ID 更改为 data-id。我已经提取了对 CSS 的一些更改,它以一种复杂的方式级联。
$('.seatColors img, .frameColors img').click(function(e) {
let id = e.target.getAttribute("data-id");
let target = id.includes('seat') ? 'seat' : 'frame'
const $container= $(this).closest(".visualizer");
$container.find('.' + target).hide(); // hide all of type
// construct [data-id=whiteSeat] when seatWhite is clicked
const showSelector = '[data-id=' +
id.replace(target, '').toLowerCase() +
(target === 'seat' ? 'Back' : 'Frame')+']'; // ternary if target is seat, use Back else use Frame
console.log(id,target,showSelector);
$(showSelector,$container).show().addClass('color-overlay');
});
.visualizer {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around
}
.chairContainer {
position: relative
}
.chairContainer img {
width: 100%;
max-width: 550px
}
.frame,
.seat {
position: absolute;
top: 0;
left: 0;
display: none
}
.intro .frameColors,
.intro .seatColors {
display: grid;
grid-template-columns: repeat(auto-fill, 33px);
grid-gap: 10px;
-ms-flex-pack: center;
justify-content: center;
margin: 0 auto 1em;
text-align: center
}
.intro .frameColors p,
.intro .seatColors p {
font-size: 7px
}
.intro .frameColors img,
.intro .seatColors img {
width: 100%;
cursor: pointer;
max-width: 50px
}
<base href="http://seabreeze.otsandbox.com/" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.typekit.net/qje3jyr.css"/>
<div class="visualizer">
<div class="chairContainer">
<img src="/sites/default/files/color-visualizer/background.jpg" class="background">
<img src="/sites/default/files/color-visualizer/seatback-red.png" data-id="redBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-black.png" data-id="blackBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-blue.png" data-id="blueBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-teal.png" data-id="tealBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-white.png" data-id="whiteBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-ww.png" data-id="wwBack" class="seat">
<img src="/sites/default/files/color-visualizer/frame-red.png" data-id="redFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-black.png" data-id="blackFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-blue.png" data-id="blueFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-teal.png" data-id="tealFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-white.png" data-id="whiteFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-ww.png" data-id="wwFrame" class="frame">
</div>
<div class="intro">
<p>Select a seat and back color</p>
<div class="seatColors">
<img src="/sites/default/files/color-visualizer/red.png" class="seatColor" data-id="seatRed">
<img src="/sites/default/files/color-visualizer/black.png" class="seatColor" data-id="seatBlack">
<img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" data-id="seatBlue">
<img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" data-id="seatTeal">
<img src="/sites/default/files/color-visualizer/white.png" class="seatColor" data-id="seatWhite">
<img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" data-id="seatWw">
</div>
<p>Select a frame color</p>
<div class="frameColors">
<img src="/sites/default/files/color-visualizer/red.png" class="frameColor" data-id="frameRed">
<img src="/sites/default/files/color-visualizer/black.png" class="frameColor" data-id="frameBlack">
<img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" data-id="frameBlue">
<img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" data-id="frameTeal">
<img src="/sites/default/files/color-visualizer/white.png" class="frameColor" data-id="frameWhite">
<img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" data-id="frameWw">
</div>
</div>
</div>
<div class="visualizer">
<div class="chairContainer">
<img src="/sites/default/files/color-visualizer/scene21/background.jpg" class="background">
<img src="/sites/default/files/color-visualizer/scene21/red-seats.png" data-id="redBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/black-seats.png" data-id="blackBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/blue-seats.png" data-id="blueBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/teal-seats.png" data-id="tealBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/white-seats.png" data-id="whiteBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/ww-seats.png" data-id="wwBack" class="seat">
<img src="/sites/default/files/color-visualizer/scene21/red-frame.png" data-id="redFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/black-frame.png" data-id="blackFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/blue-frame.png" data-id="blueFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/teal-frame.png" data-id="tealFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/white-frame.png" data-id="whiteFrame" class="frame">
<img src="/sites/default/files/color-visualizer/scene21/ww-frame.png" data-id="wwFrame" class="frame">
</div>
<div class="intro">
<p>Select a seat and back color *</p>
<div class="seatColors">
<p><img src="/sites/default/files/color-visualizer/red.png" class="seatColor" data-id="seatRed"><br>Red</p>
<p><img src="/sites/default/files/color-visualizer/black.png" class="seatColor" data-id="seatBlack"><br>Black</p>
<p><img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" data-id="seatBlue"><br>Blue</p>
<p><img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" data-id="seatTeal"><br>Teal</p>
<p><img src="/sites/default/files/color-visualizer/white.png" class="seatColor" data-id="seatWhite"><br>White</p>
<p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" data-id="seatWw"><br>Weatherwood</p>
</div>
<p>Select a frame color *</p>
<div class="frameColors">
<p><img src="/sites/default/files/color-visualizer/red.png" class="frameColor" data-id="frameRed"><br>Red</p>
<p><img src="/sites/default/files/color-visualizer/black.png" class="frameColor" data-id="frameBlack"><br>Black</p>
<p><img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" data-id="frameBlue"><br>Blue</p>
<p><img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" data-id="frameTeal"><br>Teal</p>
<p><img src="/sites/default/files/color-visualizer/white.png" class="frameColor" data-id="frameWhite"><br>White</p>
<p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" data-id="frameWw"><br>Weatherwood</p>
</div>
<p>*The color shown on page load is a placeholder gray. It is not one of the colors available for purchase. This is for visualization purposes only. The actual colors may not appear exactly the same. <a href="/dealer-locater">Find and visit a dealer to see the products.</a></p>
</div>
</div>
推荐阅读
- python - 无法分配“
":" 必须是一个 "" 实例 - javascript - Laravel Passport API 向未使用付费号码的用户发送 OTP
- html - 无法使用 :link 选择器更改链接的颜色
- javascript - 使用 React 的地图加载不正确传单
- reactjs - 返回内部功能组件中的显示值
- javascript - 如何在 Chrome 的全局媒体控件中使用 blob URL 作为图像源?
- php - 如何缓存和重用 GuzzleHttp\Psr7\Response 的副本以进行调试?
- android - 大规模崩溃 org.altbeacon.beacon.service.ScanJob -> java.lang.RuntimeException: android.os.DeadSystemException
- node.js - Mongodb 连接池与单例线程
- angular - 实现自定义ckeditor构建到角度