Question

如果字段未填写，我尝试更改提交按钮的背景颜色。

例如：如果我没有填写所有输入和textareas然后onmousehover提交按钮的背景应该变为红色。但是如果填写了所有字段，那么它应该变为绿色（onmousehover）。

我已经有填充输入的代码，所以我只需要使用函数来改变颜色：

        (function() {
      $('form > input, form > textarea').keyup(function() {

        var empty = false;
        $('form > input, form > textarea').each(function() {
          if ($(this).val() == '') {
            empty = true;
          }
        });

        if (empty) {
          $('#active').attr('disabled', 'disabled');

        } else {
          $('#active').removeAttr('disabled');

        }
      });
    })()

我的Html：

                <form method="post" action="send.php" >
                <input name="name" type="text" class="topinp placeholdprop" style="float: left;" placeholder="Your cool name" />
                <input name="email" type="text" class="topinp placeholdprop" style="float: right;" placeholder="Your awesome email" />
                <input name="subject" type="text" class="subinp placeholdprop" placeholder="What do you need help with?" />
                <textarea name="comment" class="placeholdprop textareacntr" rows="7" type="text" placeholder="Type your message here" ></textarea>
                <input id="active" type="submit" value="Submit" disabled="disabled" />
            </form>

这些功能应该追溯if (empty)我相信。请帮忙。

Answer 1

在你的标题中你说你想改变一个div，但似乎你想要改变按钮的颜色。我不知道如何更改默认提交按钮的颜色，除非您使用Jquery UI更改它。但是，让我向您展示将鼠标悬停在div上的代码：

var original_color = '';
$('#divID').hover(function(){
    //hover code comes here
    original_color = $(this).css('background-color');
    divColor = function you use to check wether or not fields are empty;
    $(this).css('background-color', divColor);
}, function(){
    //mouse leave code comes here
    $(this).css('background-color', original_color);
});

Answer 2

这可能是解决方案中有趣的部分：

  $('#active').hover(function() {
    $(this).css("background-color", empty?"red":"green")
  });

其余部分可以在摘录中找到：

    (function() {
      $('form > input, form > textarea').keyup(function() {
        var valid = true;
        $('form > input, form > textarea').each(function() {
          if ($(this).val() == '') {
            valid = false;
          }
        });
        $('#active').prop('disabled', !valid);
        $('#active').toggleClass ('valid', valid);
      });
    })()

#active:hover {
  background-color: red;
}
#active.valid:hover {
  background-color: green;
}

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form method="post" action="send.php" >
      <input name="name" type="text" class="topinp placeholdprop" placeholder="Your cool name" />
      <input name="email" type="text" class="topinp placeholdprop" placeholder="Your awesome email" />
      <input name="subject" type="text" class="subinp placeholdprop" placeholder="What do you need help with?" />
      <textarea name="comment" class="placeholdprop textareacntr" rows="7" type="text" placeholder="Type your message here" ></textarea>
      <input id="active" type="submit" value="Submit" disabled="disabled"/>
    </form>

如何使用jquery更改按钮背景颜色onmouseover？

2 个答案: