javascript - 使用 jQuery 响应 HTML 元素以更改 DIV 的背景和文本

Question

我有一个元素，它在我运行时返回一个值true或。false$('#myId').val()

一旦返回 true 或 false，我希望将div其背景颜色更改为绿色表示 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

您必须将字符串转换为布尔值才能正确评估。我在小提琴中有一个按钮来返回值。

JSFiddle

HTML：

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

查询：

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

Answer 2

我会说做一个默认的绿色背景类，然后我们一个覆盖类来添加红色背景。您的代码将如下所示：

if ($('myId').val())
{
    $('myId').addClass('falseClass');
} else {
    $('myId').removeClass('falseClass');
};

使用 CSS 添加背景颜色，如下所示：

.divClass{
background: green;
}

.divClass.falseClass{
background: red;
}

如果你想添加一个带有一些特定文本的 div（比如任何 'myId' 标记），然后更改颜色，你可以先添加 div。

$('<div class="divClass">').appendTo('myId').text('foo')

if ($('myId').val())
{
    $('myId').addClass('falseClass');
} else {
    $('myId').removeClass('falseClass');
};

Answer 3

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

这对我最有效：

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