javascript - jQuery を使用して DIV の背景とテキストを変更する HTML 要素に応答する

Question

またはを実行したときにいずれtrueかの値を返す要素があります。false$('#myId').val()

divtrue または false が返されたら、特定の背景色を true の場合は緑に、false の場合は赤に変更したいと考えています。

if ($('#myId').val())
{
   code should return a div with text and green background
}
else
{
   code should return a div with text and red background
}

Answer 1

正しく評価するには、文字列を bool に変換する必要があります。フィドルに値を返すボタンがあります。

JSFiddle

HTML:

<div id="myDiv">
    <input id="myID" value="false"/>
    <input id="myBtn" type="button" value="submit"/>
</div>

JQuery:

$('#myBtn').on('click', function () {
    $('#myDiv').css('background', (($('#myID').val() == "true") ? 'green' : 'red'));
});

Answer 2

<script type="text/javascript">
if ($('#myId').val()){
    showDiv("green");
}else{
    showDiv("red");
}

function showDiv(color){
    var text = "Hello world";
    return "<div class=\""+color+"\">"+text+"</div>";
}
</script>

<style>
.green{
    background-color:green;
}

.red{
    background-color:red;
}
</style>

Answer 3

これは私にとって最もうまくいきました：

  if ($('#myID').val()) {
       $('#SOMECLASS').text('Some Text').css('background-color', 'green');
  else
       $('#SOMECLASS').text('Some Text').css('background-color', 'red');
  }