jQuery的變化功能僅適用於最接近元素

我使用jQuery的變化功能僅適用於最接近元素

$(document).ready(function() { 
$(".productselector").change(function() { 
    $(this).closest('.form-group').find("option:selected").each(function() { 
     if ($(this).attr("value") == "value1") { 
      $(".mini1").slideDown(); 
     } 
     else { 
      $(".mini1").slideUp(); 
     } 
}); 
}); 
});

與HTML

<div id="no1" style="display:block"> 
<div class="form-group"> 
<label>1. Item</label> 

<select class="productselector"/> 
<option value=""></option> 
<option value="value1"> Item A </option> 
<option value="value2"> Item B </option> 
</select> 
</div> 
<span class="mini1" style=" display: none;">text</span> 

</div> 
<div id="no2" style="display:block"> 
<div class="form-group"> 
    <label>2. Item</label> 
<select class="productselector"/> 
<option value=""></option> 
<option value="value1"> Item A </option> 
<option value="value2"> Item B </option> 
</select> 
</div> 
<span class="mini1" style=" display: none;">text</span> 
</div>

如果我改變選擇的領域之一，以「項目A」我希望「文本」，以示直接在我剛剛使用的選擇字段下，而不是在兩者之下。看起來像

.closest('.form-group')

沒有效果...？ jsFiddle here

來源

2016-01-20 chicky

試試這個： UPD：

$(function() { 
    $(".productselector").on('change', function() { 
     var val = $(this).find("option:selected").val(); 
     var $span = $(this).closest(".form-group").parents('div').find('.mini1'); 
     if (val == "value1") $span.slideDown(); 
     else $span.slideUp();   
    }); 
});

https://jsfiddle.net/44w3n1k6/12/

來源

2016-01-20 16:50:51 alex10

我編輯的文字一點點，所以也許這是更清晰現在我所期待的。您的提案僅適用於第一個選擇字段。 – chicky

好的，我已經更新了答案，請參閱此選項。 – alex10

非常感謝，我希望能夠理解如何正確應用.closest（）。 – chicky

問題是這些線路，

$(".mini1").slideDown(); 
$(".mini1").slideUp();

兩個類被命名爲mini1所以他們都表演。您需要選擇正確的

來源

2016-01-20 16:47:15 Zach

jQuery的變化功能僅適用於最接近元素

回答

相關問題