javascript - 当选择相关选项时显示相关 div 并隐藏其他 div

Question

我正在尝试学习 jQuery 并且希望能够:

1. (已实现)选择相关选项时显示价格
2. 隐藏其他背景并仅在单击按钮时显示相关背景(即选择“选项 2”应显示“div-2”)。

为什么我无法达到 2？

抱歉，这是部分 JS 和部分 JQ，但我不太了解 JQ。如果 JS 可以转换为 JQ 我真的很感激:)

function updatePrice() {
    $('#priceSpan').html(
  $('#selector').find('option:selected').data('price'));
    }

function rightBG() {
  var divToDisplay = $('#selector').find('option:selected').data('div-id');
  var els = document.getElementsByClassName('options');
  
  for (i=0; i<els.length; i++) {
    var el = els[i];
    el.style.display='none';
  }
  
  divToDisplay.style.display='block';
}

#selector {
  width: 300px;
  height: auto;
}
#div-1{
  width: 100%;
  height: 50px;
  background: yellow;
}
#div-2{
  width: 100%;
  height: 50px;
  background: lightblue;
}
#div-3{
  width: 100%;
  height: 50px;
  background: lightgreen;
}
#priceSpan {
  background: orange;
}
.options {
  display: block;
}

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

<select onchange="updatePrice()" id="selector">
  <option class="options" value="id-1" data-price="10" data-div-id="#div-1">choice 1</option>
  <option class="options" value="id-2" data-price="20" data-div-id="#div-2">choice 2</option>
  <option class="options" value="id-3" data-price="30" data-div-id="#div-3">choice 3</option>
</select>

<div id="div-1">div 1</div>
<div id="div-2">div 2</div>
<div id="div-3">div 3</div>
<span id="priceSpan">Price here</span>

<button onclick="rightBG()">View Relevant Background</button>

Answer 1

我会创建一个包含的 div，然后显示相关的 div(如果它已经显示，则不会发生任何事情)，然后隐藏它的同级 div。

$(myOption.data('div-id')).show().siblings().hide();

function updatePrice() {
  var myOption = $('#selector').find('option:selected');
  $('#priceSpan').html(myOption.data('price'));
  $(myOption.data('div-id')).show().siblings().hide();
}

function rightBG() {
  var myOption = $('#selector').find('option:selected');  $(document.body).css("background-color",$(myOption.data('div-id')).css("background-color"));
}

#selector {
  width: 300px;
  height: auto;
}
#div-1{
  width: 100%;
  height: 50px;
  background: yellow;
}
#div-2{
  width: 100%;
  height: 50px;
  background: lightblue;
}
#div-3{
  width: 100%;
  height: 50px;
  background: lightgreen;
}
#priceSpan {
  background: orange;
}
.options {
  display: block;
}

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

<select onchange="updatePrice()" id="selector">
  <option class="options" value="id-1" data-price="10" data-div-id="#div-1">choice 1</option>
  <option class="options" value="id-2" data-price="20" data-div-id="#div-2">choice 2</option>
  <option class="options" value="id-3" data-price="30" data-div-id="#div-3">choice 3</option>
</select>
<div class="div-container">
  <div id="div-1">div 1</div>
  <div id="div-2">div 2</div>
  <div id="div-3">div 3</div>
</div>
<span id="priceSpan">Price here</span>

<button onclick="rightBG()">View Relevant Background</button>