如果選擇了值，那麼做到這一點

Question

我試圖用這個在我的jQuery的，這樣我可以使用相同的類，但有相互獨立

繼承人的撥弄我的影響在

http://jsfiddle.net/d0okie0612/ThnKc/

工作，你可以當您選擇選項3字HEY出來兩個選擇標籤，但我想它使用相同的類是相互獨立的。

我想我能做到這一點使用類似

$(this).children('div.custom_size').fadeIn() 

，但它似乎沒有工作，我一直在堅持和沮喪了很久

繼承人的HTML

<select id="print_size_options_LargeFormatBlackWhite"> 
    <option value="">1</option> 
    <option value="">2</option> 
    <option value="customSize">3</option> 
</select> 

<div class="custom_size" style="display: none;"> 
    Hello 
</div> 

<br /> 
<br /> 
<br /> 
<select id="print_size_options_LargeFormatBlackWhite"> 
    <option value="">1</option> 
    <option value="">2</option> 
    <option value="customSize">3</option> 
</select> 

<div class="custom_size" style="display: none;"> 
    Hello 
</div> 

繼承人Jquery

$("#print_size_options_LargeFormatBlackWhite").change(function(evt) { 
    var selected; 
    selected = $(this).val(); 
    if (selected === "customSize") { 
     return $(".custom_size").fadeIn(); 
    } else { 
    return $(".custom_size").fadeOut(); 
    } 
    }).change(); 

我是jQuery的超級新手，所以如果你能在小提琴中表現出我會很棒！

謝謝！

Answer 1

這可能會有所幫助。 ID我認爲應該爲元素

http://jsfiddle.net/sUuqd/1/

$(".print_size_options_LargeFormatBlackWhite").change(function(evt) { 
var selected; 
selected = $(this).val(); 
if (selected === "customSize") { 
    return $(this).parent().find(".custom_size").fadeIn(); 
    } else { 
return $(this).parent().find(".custom_size").fadeOut(); 
} 
}).change(); 

Answer 2

供應相對的上下文到$(this)元件：

if (selected === "customSize") { 
    return $(this).next(".custom_size").fadeIn(); 
    } else { 
    return $(this).next(".custom_size").fadeOut(); 
    } 

JS Fiddle demo。

此外你有無效的HTML，一個id必須是文檔中是唯一的，因此，你應該使用一個類名稱爲您select元素代替：

<select class="print_size_options_LargeFormatBlackWhite"> 
<!-- removed for brevity --> 
</select> 
<div class="custom_size" style="display: none;">Hello</div> 
<!-- removed for brevity --> 
<select class="print_size_options_LargeFormatBlackWhite"> 
<!-- removed for brevity --> 
</select> 
<div class="custom_size" style="display: none;">Hello</div> 

隨着jQuery的：

$(".print_size_options_LargeFormatBlackWhite").change(function (evt) { 
    var selected = $(this).val(); 
    $(this).next('.custom_size')[selected === 'customSize' ? 'fadeIn' : 'fadeOut'](); 
}).change(); 

JS Fiddle demo。

最後，因爲有時我只是想有點太多了使用三元運算符：

$(".print_size_options_LargeFormatBlackWhite").change(function (evt) { 
    var selected = $(this).val(); 
    $(this).next('.custom_size')[selected === 'customSize' ? 'fadeIn' : 'fadeOut'](); 
}).change(); 

JS Fiddle demo。

Answer 3

看看是唯一我fiddle。我在select和us屬性中添加了for="someid"屬性來標識選擇代表哪個div。

我的JS是這樣的：

$("select").change(function(evt) { 
    var selected; 
    selected = $(this).val(); 
    if (selected === "customSize") { 
    return $(".custom_size#"+$(this).attr("for")).fadeIn(); 
    } else { 
    return $(".custom_size#"+$(this).attr("for")).fadeOut(); 
    } 
}).change(); 

和HTML這樣的：

<select id="print_size_options_LargeFormatBlackWhite" for="a"> 
    <option value="">1</option> 
    <option value="">2</option> 
    <option value="customSize">3</option> 
</select> 

<div id="a" class="custom_size" style="display: none;"> 
    Hello 
</div> 

第二選擇只是有一個for="b"和第二div有id="b"