jQuery显示ID为基于点击的图片 [英] JQuery show images with id based on click

问题描述

我在JQuery上还很新，所以我对语法和函数的了解可能需要深入解释.请耐心等待我和提出问题.

I'm pretty new at JQuery so my knowledge of syntax and functions may need some in depth explaining. Please be patient with me and questions.

我正在构建一个彩色可视化仪.基本上是一堆位置为:绝对，显示为:无的图像.

I'm building a color visualizer. Basically a stack of images with position:absolute and display:none.

这是我的HTML结构:

Here's my HTML structure:

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

这里是有效的JQuery，但在某种意义上说我并不想做我想做的事情，因为我希望能够在底部divs #seatColors和#frameColors中使用图像的类.单击功能，然后根据ID在chairContainer中显示图像.

Here is the JQuery that works, but doesn't do what I want it to do in the sense that I want to be able to use the class of the image in the bottom divs #seatColors and #frameColors for the click function and then to show the images in the chairContainer based on the id.

jQuery

    $('#seatRed').click(function(){
        $('.seat').hide();
        $('#redBack').show().addClass('color-overlay');
    })
    $('#seatBlack').click(function(){
        $('.seat').hide();
        $('#blackBack').show().addClass('color-overlay');
    })
    $('#seatBlue').click(function(){
        $('.seat').hide();
        $('#blueBack').show().addClass('color-overlay');
    })
    $('#seatTeal').click(function(){
        $('.seat').hide();
        $('#tealBack').show().addClass('color-overlay');
    })
    $('#seatWhite').click(function(){
        $('.seat').hide();
        $('#whiteBack').show().addClass('color-overlay');
    })
    $('#seatWw').click(function(){
        $('.seat').hide();
        $('#wwBack').show().addClass('color-overlay');
    })



    $('#frameRed').click(function(){
        $('.frame').hide();
        $('#redFrame').show().addClass('color-overlay');
    })
    $('#frameBlack').click(function(){
        $('.frame').hide();
        $('#blackFrame').show().addClass('color-overlay');
    })
    $('#frameBlue').click(function(){
        $('.frame').hide();
        $('#blueFrame').show().addClass('color-overlay');
    })
    $('#frameTeal').click(function(){
        $('.frame').hide();
        $('#tealFrame').show().addClass('color-overlay');
    })
    $('#frameWhite').click(function(){
        $('.frame').hide();
        $('#whiteFrame').show().addClass('color-overlay');
    })
    $('#frameWw').click(function(){
        $('.frame').hide();
        $('#wwFrame').show().addClass('color-overlay');
    })

上述原因不是最令人满意的原因是因为我们为此而建的公司可能希望添加颜色.添加图像是一回事，但是似乎不必每次都编辑Jquery.任何帮助表示赞赏.如我所说，如果它是一个复杂的功能，我可能需要一些帮助来理解它.谢谢！

The reason the above is not the most satisfactory is because the company we are building this for may want to add colors. It's one thing to add images, but having to edit Jquery every time seems unnecessary. Any help is appreciated. As I said, if it's a complex function, I may need some help understanding it. Thanks!

推荐答案

用以下5行代码替换所有jQ代码，并尝试使用当前的命名约定在html中添加新颜色，它应该可以工作:)

Replace all your jQ code with following 5 lines of code and try adding new color in html with current naming convention,it should work :)

$('#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>

这篇关于jQuery显示ID为基于点击的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！