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

Question

当我单击输入时，我需要向输入包装器添加一个类，并在单击其他输入时删除该类。

我已经调整了toggleClass，但只有再次单击相同的输入时，它才会删除该类。

我尝试使用函数:find()和closest()，但无法准确地确定我需要哪一个，或者应该以什么顺序调用它们......任何帮助将不胜感激。

到目前为止，代码如下:

<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');
});

演示:Fiddle

如果您仍然想点击try this