Question

的Javascript

$(".show").change(function(){
    if ($(this).val() == "1") {    
        $(".text_area").show();
    }
    else {
        $(".text_area").hide();
    }
});

我想将此代码用于此类的所有元素，但是当我选择带有“value 1”的选项时，该选项会对所有元素生效。请帮忙。谢谢。这是演示点击here

Answer 1

使用$(this).next()：

$(".show").change(function () {
    if ($(this).val() == "1") {
        $(this).next(".text_area").show();
    } else {
        $(this).next(".text_area").hide();
    }
});

您必须使用关键字this。 $(this)适用于您的选择器的上下文事件。

由于您将类名作为选择器，因此您应该注意它返回一个集合。这意味着如果您有多个元素，那么它将引用all，this引用应用于集合中当前选择器的事件。

Answer 2

如果您碰巧更改了html的顺序，例如在选择框之前放置文本区域，则无法使用。因此，作为上一个答案的替代方案，您可以将您的组包装成div：

<div class="container">
    <select class="show">
        <option value="0">NO</option>
        <option value="1">YES</option>
    </select>
    <textarea class="form-control text_area" type="text" name="text_area" placeholder="Write something" rows="5" cols="50"></textarea>
</div>

当您要显示/隐藏文本区域时，您可以执行以下操作：

$(this).closest('.container').find('.text_area').show();

或

$(this).closest('.container').find('.text_area').hide();

以下是演示：http://jsfiddle.net/n1fjo6qu/13/

如何在这种情况下进行多次处理

2 个答案: