Question

当值为空时，我希望Input和Textarea通过javascript变为红色，它适用于输入但不适用于textarea。有人可以帮忙吗？

$(document).on("click", '.btn-info.mailContact', function () {
    values = {
        Onderwerp: $('.Subject').val(),
        Text: $('.TheMessage').value,
    };
    if ($('.Subject').val() != "" && $('.TheMessage').val() != "") {
    State.sendContactMail(values);
    window.location.href = '/confirmation';
    } else {
        Onderwerp.style.color = Onderwerp.value === "" ? "#f00" : "#0f0";
        Onderwerp.style.borderColor = Onderwerp.value === "" ? "#f00" : "#0f0";
        Text.style.color = Text.value === "" ? "#f00" : "#0f0";
        Text.style.borderColor = Text.value === "" ? "#f00" : "#0f0";

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control Subject" id="Onderwerp" placeholder="Vul je onderwerp hier in"/>

<textarea class="form-control TheMessage" id="Text"  wrap="soft" placeholder="Vul je bericht hier in"></textarea>

<a id="btn-mailContact" class="btn btn-info mailContact">Verstuur contactformulier</a>

Answer 1

您依赖于readable and standard。

这是一个可怕的想法，因为它使代码非常混乱，难以维护。变量似乎无处不在。

其中一个问题（一般使用全局变量）是其他代码可能定义具有相同名称的全局。

在这种情况下，浏览器定义的全局var element_ids = ['Onderwerp', 'Text']; elements_ids.forEach(function (id) { var $element = $("#" + id); var color = $element.val === "" ? "#f00" : "#0f0"; $element.css({ color: color, borderColor: color }); });变量an element with an ID getting a matching global variable。

不要使用像这样的全局变量。您已经在使用jQuery，因此使用ID选择器创建一个jQuery对象。

当你在做它时：不要重复自己。

根据这一点，应该可以解决这个问题：

ToolbarComponent

Answer 2

不需要使用变量使用像这样的id和类

$.('.TheMessage').css("color","#fff").css("border-color","#0f0"); //Use jquery like this

Answer 3

请检查此解决方案。希望这对你有所帮助。

我尝试使用您自己的代码解决。感谢。

＆＃13;

$(document).ready(function(){
$(".mailContact").click(function () {
    values = {
        Onderwerp: $('.Subject').val(),
        Text: $('.TheMessage').value,
    };
    if ($('.Subject').val() != "" && $('.TheMessage').val() != "") {
    State.sendContactMail(values);
    window.location.href = '/confirmation';
    } else {
        Onderwerp.style.color = Onderwerp.value === "" ? "#f00" : "#0f0";
        Onderwerp.style.borderColor = Onderwerp.value === "" ? "#f00" : "#0f0";
        document.getElementById("Text").style.color = document.getElementById("Text").value === "" ? "#f00" : "#0f0";
        
        document.getElementById("Text").style.borderColor = document.getElementById("Text").value === "" ? "#f00" : "#0f0";
        

    }
})
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<input type="text" class="form-control Subject" id="Onderwerp" placeholder="Vul je onderwerp hier in"/>

<textarea class="form-control TheMessage" id="Text"  wrap="soft" placeholder="Vul je bericht hier in"></textarea>

<a id="btn-mailContact" class="btn btn-info mailContact">Verstuur contactformulier</a>
<input type="button" class="mailContact" value="send" />

</body>
</html>

＆＃13;

Textarea颜色，bordercolor不会改变

3 个答案: