如何使用jQuery選擇/ .change（）來顯示隱藏的div

我有以下選擇字段，並根據是否選擇類.show-x-trend或show-x我想有條件地顯示一個單獨的div。如果選擇.show-x-trend<option>，我想揭示已經隱藏的#x-axis-trend-wrap<div>，如果選擇了show-x選項，我想揭示已經隱藏的#x-axis-wrap<div>。在下面的代碼中，你會看到我有兩個CSS類，也有值分配給3個選擇選項，因爲我試圖用幾種不同的方式達到效果，但目前爲止沒有運氣。如何使用jQuery選擇/ .change（）來顯示隱藏的div

<div id="visualize-wrap"> 
    <h3>Visualization Shows</h3> 
    <select id="visualize-shows" name="visualize"> 
     <option class="no-show" value="00">Select One</option> 
     <option class="show-x-trend" value="01">Trend Over Time</option> 
     <option class="show-x" value="02">Breakdown of Sum Total</option> 
     <option class="show-x" value="03">Side-by-side Comparison</option> 
    </select> 
</div>

來源

2012-03-29 Brian

我不明白這一點。你能更清楚一點嗎？你想選擇一個選項並根據選項的類來隱藏/顯示一個div？是嗎？ – elclanrs 2012-03-29 18:53:43

@elclanrs多數民衆贊成在我的閱讀！ – ManseUK 2012-03-29 18:57:57

@elclanrs沒錯。如果選擇了'option.show-x-trend'，我會淡入'div＃x-axis-trend-wrap'。 'option.show-x'被選中，我淡入'div＃x-axis-wrap'。 – Brian 2012-03-29 19:02:44

您可以使用hasClass方法來確定所選擇的選項包含所需的類或不採取相應的行動。

$('#visualize-shows').change(function(){ 
    var $selectedOption = $(this).find('option:selected'); 
    $('#x-axis-trend-wrap') 
    .toggle($selectedOption.hasClass('show-x-trend')); 
    $('#x-axis-wrap') 
    .toggle($selectedOption.hasClass('show-x')); 
});

工作演示 - http://jsfiddle.net/X2dPt/

來源

2012-03-29 18:53:58 ShankarSangoli

+1很好... did not know'.toggle（）'可以傳遞一個布爾值...比我的簡單！總是用jQuery學習 – ManseUK 2012-03-29 18:56:14

控制檯告訴我'object has no method'選項'' – Brian 2012-03-29 19:00:53

@Brain - 請檢查我編輯的答案。這是一個錯字。 – ShankarSangoli 2012-03-29 19:03:20

嘗試是這樣的

$("#visualize-shows").change(function() { 
    $selected = $(this).find('option:selected'); // get selected option 
    if ($selected.hasClass('show-x-trend')) { // check the class 
     $('#x-axis-trend-wrap').toggle(); // toggle display 
    } else if ($selected.hasClass('show-x')) { 
     $('#x-axis-wrap').toggle(); 
    } 
});

這款採用.hasClass()

來源

2012-03-29 18:52:14 ManseUK

請更正這個'$（this）.option（'：selected'）'，它應該是'find'而不是選項:) – ShankarSangoli 2012-03-29 18:58:33

如何使用jQuery選擇/ .change（）來顯示隱藏的div

回答

相關問題