jquery在输入焦点上将类添加到父类

我有一张联系表。我想在input:focus上的输入框的父div中添加类。 这是你的电话号码。我希望不仅仅是输入框，而且输入焦点上的div背景颜色应该变为紫色

标记：

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

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

.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;
}

CSS:

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

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

.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;
}

---

此外，您是否可以帮助我，好像我需要添加两个属性，例如：

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

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

试试这个

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

使用焦点事件

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

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

编辑：使用toggleClass（）的替代解决方案

CSS

JS

---

如果我没弄错你的问题

您正在选择

focused

元素，但需要在

focus

事件上更改父

div

的css

这样做,

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

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

---

您可以改为添加类并给出样式

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

---

为什么要添加类并使用css（）方法？我已经阅读了op想将类添加到父级的标题，在描述中他想将背景设置为紫色，因此我设置了两种方式来添加有问题的代码，以及JSFIDLE LINK感谢您的建议。完美答案：）谢谢没有jQuery有没有办法做到这一点？