Textareaの色、bordercolorは変更されません

値が空の場合、InputとTextareaが赤で表示されるようにしたいのですが、それは入力用に機能しますが、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

変数は、このソリューションをご確認ください。この

$.('.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に依存しています。

これはコードを非常に混乱させ、維持するのが難しいため、ひどい考えです。変数はどこにも現れていないようです。

問題の1つ（一般的にグローバルを使用すること）は、他のコードが同じ名前のグローバルを定義する可能性があることです。

この場合、グローバルText変数already 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

のようにidとクラスを使用使用する必要はありません：この線に沿って

何かがトリックを行う必要があります。これがあなたに役立つことを願っています。

私はあなた自身のコードを使用して解決しようとしました。ありがとう。

$(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は変更されません

答えて

関連する問題