は、関連のdivを表示＆関連オプションは

Question

私はjQueryのを学ぶためにしようとしている

を選択したときに他の人を隠し、できるようにしたい：

1. 関連するオプションを選択したときに価格を表示（達成）
2. 他の背景を非表示にする&は、ボタンをクリックすると関連する背景のみを表示します（つまり、 'option 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を表示したい:)ことを感謝します起こる）、そしてそれを兄弟に隠す。

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