javascript - 下拉 Div 切换 2 个不同的 Div

Question

我有一个运行良好的现有 JavaScript 解决方案，但我遇到了一个新的增强功能，它要求我命名为“alwaysdisplayonselection”的 div 仅在下拉选择从默认更改为其他内容后才可见。

这是工作 JSFIDDLE

这是 HTML 代码:

<select name="my-select" class="js-my-select">
  <option value="nothing" selected>Select Color</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>
<div class="js-my-image alwaysdisplayonselection">This is visible once a selection is made, but invisible once the selection is returned to default, or the first dropdown option with "nothing" value.</div>

这是在不同 Div 之间切换的 javascript:

$(function() {
  var $select = $('.js-my-select'),
    $images = $('.js-my-image');

  $select.on('change', function() {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
  });
});

如果您能帮助我让“alwaysdisplayonselection”div 仅显示一次，并且在刷新页面或所选选项的值为“无”时选择并隐藏选项，我将不胜感激。

提前谢谢您!

Answer 1

您可以toggle change 事件内的可见性:

$('.alwaysdisplayonselection').toggle(this.value != 'nothing');

您的更新fiddle

var $select = $('.js-my-select'),
    $images = $('.js-my-image');

$select.on('change', function () {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
    $('.alwaysdisplayonselection').toggle(this.value != 'nothing');
});

div {
  display: none;
  height: 50px;
  width: 50px;
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

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

<select name="my-select" class="js-my-select">
    <option value="nothing" selected>Select Color</option>
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>
<div class="js-my-image alwaysdisplayonselection">This is visible once a selection is made, but invisible once the
    selection is returned to default, or the first dropdown option with "nothing" value.
</div>