Textarea颜色，bordercolor不会更改

我希望Input和Textarea在值为空时通过JavaScript变成红色，它对输入有效，但对textarea不起作用。有人可以帮忙吗？Textarea颜色，bordercolor不会更改

$(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>

来源

2017-08-29 Brian Boddaert

无需使用变量使用ID和类这样

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

来源

2017-08-29 10:45:29

非常感谢您 –

没有问题，是它的工作？ –

部分地，我得到了我所要求的，但与Text.value ===“”？ “＃f00”：“＃0f0”;当它不是空的时候，它变回绿色，我没有用.CSS达到这个目的 –

您根据an element with an ID getting a matching global variable。

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

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

在这种情况下由浏览器所定义的全局变量Textalready has a value。

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

当你在这：不要重复自己。

沿东西这行应该做的伎俩：

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

来源

2017-08-29 10:40:18 Quentin

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

我试图用自己的代码来解决。谢谢。

$(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"; 
 
     
 

 
    } 
 
}) 
 
});

<!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>

来源

2017-08-29 11:25:02

Textarea颜色，bordercolor不会更改

回答

相关问题