javascript - jquery add class on input click and remove class when click other input - Stack Overflow

admin管理员组

文章数量:1268534

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.

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.

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>

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.

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.

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>

• javascript
• jquery
• find
• toggleclass
• closest

Share Improve this question Follow asked Feb 5, 2014 at 16:18 mlclmmlclm 72566 gold badges1717 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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

本文标签： javascriptjquery add class on input click and remove class when click other inputStack Overflow