jquery thêm lớp cho phụ huynh vào tiêu điểm nhập

Question

Tôi có một biểu mẫu liên hệ. Tôi muốn thêm class vào div cha của hộp đầu vào trên input: focus. Đây là fiddle. Tôi muốn rằng không chỉ hộp đầu vào mà màu nền div sẽ chuyển sang màu tím ở tiêu điểm nhập.

Markup:

<div class="round"> 
    <div class="round_label">name</div> 
    <input type="text" class="round_text"> 
</div> 

Javascript:

jQuery(document).ready(function($) { 
    $(".round_text:focus").parent().css('background', '#8b66ac'); 
    $('.round_text:focus').parent().css('background-color', 'red'); 
}); 

CSS:

.round { 
    background: none repeat scroll 0 0 #F3F3F3; 
    border-radius: 30px 30px 30px 30px; 
    border-top: 1px solid #B2B2B2; 
    height: 50px; 
    padding-left: 20px; 
    width: 440px; 
} 
.round_text:focus { 
    background: none repeat scroll 0 0 #8b66ac; 
} 
.round_label { 
    border-right: 1px solid #D1D1D1; 
    color: #B6B6B6; 
    float: left; 
    font-size: 16px; 
    height: 40px; 
    padding-top: 10px; 
    width: 156px; 
} 
.round_text { 
    background: none repeat scroll 0 0 #F3F3F3; 
    border: medium none; 
    color: #424242; 
    float: left; 
    height: 50px; 
    width: 240px; 
} 

---

Ngoài ra, bạn có thể giúp tôi như thể tôi cần phải thêm hai thuộc tính ví dụ:

$(".round_text").focus(function(){ 
     $(this).parent().css('background', '#8b66ac','color','#fff'); 

    }).blur(function(){ 
     $(this).parent().css('background', /*color*/); 
    }) 

Answer 1

Bạn có thể thêm lớp để thay thế và cung cấp cho các phong cách

jQuery(document).ready(function($) { 

$(".text").focus(function(){ 
    $(this).parent().removeClass("round"); 
    $(this).parent().addClass("bluebg"); 

    }).blur(function(){ 
     $(this).parent().removeClass("bluebg"); 
    $(this).parent().addClass("round"); 
    }) 

});  

.bluebg { 
background: none repeat scroll 0 0 #8b66ac; 
color:#623886; 
} 

Answer 2

Hãy thử

$("input").on("focus",function(){ 
    $(this).parent().addClass("any_class").css("background","purple"); 
    }); 

Answer 3

kiện Sử dụng tập trung này

$(".round_text").focus(function(){ 
     $(this).parent().css('background', '#8b66ac'); 

    }).blur(function(){ 
     $(this).parent().css('background', /*color*/); 
    }) 

EDIT: giải pháp thay thế sử dụng toggleClass()

CSS

.round_text:focus, .round.is_focused { 
    background: none repeat scroll 0 0 #8b66ac; 
} 

JS

$(".round_text").on('focus blur', function(){ 
    $(this).parent().toggleClass('is_focused'); 
}) 

Answer 4

Nếu tôi nhận được câu hỏi của bạn đúng,

Bạn đang chọn focused yếu tố, nhưng bạn cần phải thay đổi css của cha mẹ div trên focus sự kiện.

Làm điều này,

jQuery(document).ready(function($) { 

    $(".round_text").focus(function(){ 
     $(this).parent().css('background', '#8b66ac'); 
    }) 
}); 

Fiddle