选择值时显示图像

Question

首先，我对javascript / jQuery很新。但是当我选择特定选项时，我确实创建了一个显示图像的代码。但代码很长，我问自己是否可以缩短代码。

这是HTML：

<div class="form-group">
                        <label>Ik ben op zoek naar een:</label>
                        <select name="inputType" form="carform" class="form-control" id="inputType" name="inputType" title="inputType" required>
                          <option disabled selected value>Selecteer een optie</option>
                          <option value="greenlineveranda">Greenline veranda</option>
                          <option value="profilineveranda">Profiline veranda</option>
                          <option value="highlineveranda">Highline veranda</option>
                          <option value="aluminiumtuinkamer">Aluminium tuinkamer</option>
                          <option value="glasschuifwanden">Glasschuifwanden</option>
                          <option value="carportgebogen">Carport gebogen</option>
                          <option value="carportvlak">Carport vlak</option>
                          <option value="aluminiumschutting">Aluminium schutting</option>
                          <option value="composietschutting">Composiet schutting</option>
                        </select>
                    </div>

这是它背后的jQuery：

$('[name=inputType]').change(function(){
        if($(this).val() === 'greenlineveranda') {
             $('#greenlinePicture').css("display","block");
        }
        else {
             $('#greenlinePicture').css("display","none");
        }
        if($(this).val() === 'profilineveranda') {
             $('#profilinePicture').css("display","block");
        }
        else {
             $('#profilinePicture').css("display","none");
        }
        if($(this).val() === 'highlineveranda') {
             $('#highlinePicture').css("display","block");
        }
        else {
             $('#highlinePicture').css("display","none");
        }
        if($(this).val() === 'aluminiumtuinkamer') {
             $('#aluminiumtuinkamerPicture').css("display","block");
        }
        else {
             $('#aluminiumtuinkamerPicture').css("display","none");
        }
        if($(this).val() === 'glasschuifwanden') {
             $('#glasschuifwandenPicture').css("display","block");
        }
        else {
             $('#glasschuifwandenPicture').css("display","none");
        }
        if($(this).val() === 'carportgebogen') {
             $('#carportgebogenPicture').css("display","block");
        }
        else {
             $('#carportgebogenPicture').css("display","none");
        }
        if($(this).val() === 'carportvlak') {
             $('#carportvlakPicture').css("display","block");
        }
        else {
             $('#carportvlakPicture').css("display","none");
        }
        if($(this).val() === 'aluminiumschutting') {
             $('#aluminiumschuttingPicture').css("display","block");
        }
        else {
             $('#aluminiumschuttingPicture').css("display","none");
        }
        if($(this).val() === 'composietschutting') {
             $('#composietschuttingPicture').css("display","block");
        }
        else {
             $('#composietschuttingPicture').css("display","none");
        }
    });

我可以缩短jQuery功能吗？
谢谢你的时间！

Answer 1

添加课程＆＃34; pics＆＃34;每张照片。

<img src="..." class="pics">

并为每张图片设置一个ID

<img src="..." class="pics" id="pic_aaaaaaa">
<img src="..." class="pics" id="pic_bbbbbbb">
<img src="..." class="pics" id="pic_ccccccc">

因此，在更改时隐藏所有图片

 $('.pics').css("display","none");

并仅显示所选的一个：

$('[name=inputType]').change(function(){
   var selected_id = $(this).val()
   $('#pic_' + selected_id).css("display","block");
});

Answer 2

您可以这样做的一种方法是将值映射到ID，并使用该对象查找要显示的ID。

＆＃13;

＆＃13;

var pictures = {
  'greenlineveranda': '#greenlinePicture',
  'profilineveranda': '#profilinePicture',
  'highlineveranda': '#highlinePicture'
};

$('[name=inputType]').change(function() {
  $(Object.values(pictures).join(',')).css('display', none');
  $(pictures[this.value]).css('display', block');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我这样做，如果你想使用id没问题，只需添加类使图像可见。抱歉我的英语不好。

＆＃13;

＆＃13;

$(document).ready(function(){
  $('select[name="inputType"]').on('change', function(e) {
    var v = $(this).val();
    $('img').removeClass('show').filter('#' + v + 'Picture').addClass('show');
  });
});

＆＃13;

img{ display: none;}
img.show{ display: inline;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
                        <label>Ik ben op zoek naar een:</label>
                        <select name="inputType" form="carform" class="form-control" id="inputType" name="inputType" title="inputType" required>
                          <option disabled selected value>Selecteer een optie</option>
                          <option value="greenlineveranda">Greenline veranda</option>
                          <option value="profilineveranda">Profiline veranda</option>
                          <option value="highlineveranda">Highline veranda</option>
                          <option value="aluminiumtuinkamer">Aluminium tuinkamer</option>
                          <option value="glasschuifwanden">Glasschuifwanden</option>
                          <option value="carportgebogen">Carport gebogen</option>
                          <option value="carportvlak">Carport vlak</option>
                          <option value="aluminiumschutting">Aluminium schutting</option>
                          <option value="composietschutting">Composiet schutting</option>
                        </select>
                    </div>
                    
                    <img src="https://dummyimage.com/200x200/000/fff" id="greenlineverandaPicture">
                    <img src="https://dummyimage.com/200x200/333/fff" id="profilineverandaPicture">
                    <img src="https://dummyimage.com/200x200/555/fff" id="highlineverandaPicture">
                    <img src="https://dummyimage.com/200x200/777/fff" id="aluminiumtuinkamerPicture">
                    <img src="https://dummyimage.com/200x200/999/fff" id="glasschuifwandenPicture">
                    <img src="https://dummyimage.com/200x200/aaa/fff" id="carportgebogenPicture">
                    <img src="https://dummyimage.com/200x200/ccc/fff" id="carportvlakPicture">
                    <img src="https://dummyimage.com/200x200/eee/000" id="aluminiumschuttingPicture">
                    <img src="https://dummyimage.com/200x200/fff/000" id="composietschuttingPicture">

＆＃13;

＆＃13;

＆＃13;