Question

我用

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

如果我将其中一个选择字段更改为＆＃34;项目A＆＃34;我想要＆＃34;文字＆＃34;直接显示在刚刚使用的选择字段下，而不是两者之下。看起来像

.closest('.form-group')

没有效果......？ jsFiddle here

Answer 1

试试这个： 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/

Answer 2

问题是这些行，

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

这两个类都被命名为mini1，因此它们都显示出来。你需要选择正确的

jQuery更改函数仅适用于最近的元素

2 个答案: