jquery在输入单击时添加类,并在单击其他输入时删除类

Question

当我点击输入时,我需要在输入包装器中添加一个类,并在单击其他输入时删除该类.

我已经开始使用toggleClass但它只会在再次单击相同的输入时删除该类.

我已经尝试使用函数:find()和nearest()但是无法确切地确定我需要哪一个,或者以什么顺序调用它们...任何帮助都将受到赞赏.

到目前为止这里是代码:

<div class="wrapper">
    <label for="name" class="required">
        name
    </label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>

<div class="wrapper">
    <label for="other name" class="required">
        last name
    </label>
    <div class="data_area">
        <input type="text" id="" name="" value="" title="" class="" />
    </div>
</div>


<script>
    $('.wrapper input').click(function () {
        $(this).parent().addClass('red');
    });
</script>

<style>
.red {background:red;}
</style>

Answer 1

我认为你要找的是焦点/模糊而不是点击

$('.wrapper input').focus(function () {
    $(this).parent().addClass('red');
}).blur(function () {
    $(this).parent().removeClass('red');
});

演示:小提琴

如果您仍想点击,请尝试此操作