Javascript 使用jquery更改表单字段背景色

我有这个小代码，我试图改变背景颜色的领域，当我点击它来写，例如，如果我点击在电子邮件领域，我希望该领域变成黄色，使它看起来更好。我搜索过，但我不知道我找不到解决方案，因为我对jquery不太熟悉

<div class="content">
    <div class="row">
    <div class="left">First name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Last name</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Email</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    <div class="row">
    <div class="left">Password</div>
    <div class="right"><input name="Text1" type="text" class="text" /></div>
    <div class="clear"></div>
    </div>
    </div>

css

---

无论谁能帮我解决这个问题，都非常感谢。

您可以获取电子邮件类型并在此基础上添加类

JQuery

CSS

$document.readyfunction{ $'.left、.content-input、.content-textarea、.content-select.focus函数{ $this.parents'.row'.addClassover； 如果$this.attrtype=='email'{ $this.parents'.row'.addClassemail； } }.模糊函数{ $this.parents'.row'.removeClassover； 如果$this.attrtype=='email'{ $this.parents'.row'.removeClassemail； } }; }; 身体{ 字体系列：Arial、Helvetica、无衬线字体； 字体大小：13px； } .内容{ 填充：10px； 宽度：370px } .左{ 宽度：150px； 浮动：左； 填充：7px 0px 0px 7px； 最小高度：24px； } .对{ 宽度：200px； 浮动：左； 填充物：5px； 最小高度：24px； } .清楚{ 浮动：无； 明确：两者皆有； 高度：0px； } .行{ 背景色：无； 显示：块； 最小高度：32px； } .文本{ 宽度：190px； } .尺子{ 宽度：400px；边框底部：虚线1px DCDC； } tr：焦点{ 背景色：FCF0； } 运输署{ 垂直对齐：顶部； } .结束{ 背景色：F0； } .over.email{ 背景色：FF00； } .出去{ 背景色：无； } 名字 姓 电子邮件 暗语

---

您可以获取电子邮件类型并在此基础上添加类

JQuery

CSS

$document.readyfunction{ $'.left、.content-input、.content-textarea、.content-select.focus函数{ $this.parents'.row'.addClassover； 如果$this.attrtype=='email'{ $this.parents'.row'.addClassemail； } }.模糊函数{ $this.parents'.row'.removeClassover； 如果$this.attrtype=='email'{ $this.parents'.row'.removeClassemail； } }; }; 身体{ 字体系列：Arial、Helvetica、无衬线字体； 字体大小：13px； } .内容{ 填充：10px； 宽度：370px } .左{ 宽度：150px； 浮动：左； 填充：7px 0px 0px 7px； 最小高度：24px； } .对{ 宽度：200px； 浮动：左； 填充物：5px； 最小高度：24px； } .清楚{ 浮动：无； 明确：两者皆有； 高度：0px； } .行{ 背景色：无； 显示：块； 最小高度：32px； } .文本{ 宽度：190px； } .尺子{ 宽度：400px；边框底部：虚线1px DCDC； } tr：焦点{ 背景色：FCF0； } 运输署{ 垂直对齐：顶部； } .结束{ 背景色：F0； } .over.email{ 背景色：FF00； } .出去{ 背景色：无； } 名字 姓 电子邮件 暗语

---

您可以仅为电子邮件输入将事件处理程序绑定到焦点，例如：

$(document).ready(function () {
    $('[name=email]').focus(function () {
      $(this).parents('.row').addClass("over");
    }).blur(function () {
      $(this).parents('.row').removeClass("over");
    });
  });

---

您可以仅为电子邮件输入将事件处理程序绑定到焦点，例如：

$(document).ready(function () {
    $('[name=email]').focus(function () {
      $(this).parents('.row').addClass("over");
    }).blur(function () {
      $(this).parents('.row').removeClass("over");
    });
  });

---

您做得很好，只需更改CSS规则，例如：

.over{
background-color:#ffff00;
}

---

您做得很好，只需更改CSS规则，例如：

.over{
background-color:#ffff00;
}

---

快乐编码@qoke:happy编码@qoke:

$(document).ready(function () {
    $('[name=email]').focus(function () {
      $(this).parents('.row').addClass("over");
    }).blur(function () {
      $(this).parents('.row').removeClass("over");
    });
  });

.over{
background-color:#ffff00;
}