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

jquery add class on input click and remove class when click other input

提问by mlclm

I need to add a class to the input wrapper when I click on input, and remove the class when other input is clicked.

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

I've tiyed toggleClass but it would only remove the class when the same input is clicked again.

我已经绑定了 toggleClass 但它只会在再次单击相同的输入时删除该类。

I've tried to use functions: find() and closest() but cannot figure exactly which one I need, or in what order they shoudl be called... Any help would be appreciated.

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

So far here is the code:

到目前为止，这里是代码：

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

回答by Arun P Johny

I think what you are looking for is focus/blur rather than click

我认为您正在寻找的是焦点/模糊而不是点击

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

Demo: Fiddle

演示：小提琴

If you still want click then try this

如果你仍然想点击然后试试这个