使用jQuery響應HTML元素以更改DIV的背景和文本

當我運行$('#myId').val()時，我有一個返回值爲true或false的元素。使用jQuery響應HTML元素以更改DIV的背景和文本

一旦返回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 
}

來源

2013-04-25 NoviceDeveloper

你需要創建這個'div'或它的已經在網頁上？ – 2013-04-25 14:11:13

看着你的邏輯，這裏不需要任何if/else！ – 2013-04-25 14:11:17

我相信你的意思是在你的else語句中帶有文本和紅色背景的div，我們需要知道你是否想要動態創建這個div，或者如果你只是想改變現有div的CSS屬性 – 2013-04-25 14:13:00

您必須將字符串轉換爲布爾值才能正確評估。我有一個小提琴中的按鈕來返回值。

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

來源

2013-04-25 14:48:24

感謝您的意見。我會標記你的答案，但有人已經回答。感謝jsfiddle。 – NoviceDeveloper 2013-04-25 15:38:10

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

來源

2013-04-25 14:17:46 gradosevic

我說做一個默認的綠色背景類，然後我們一個覆蓋類以添加紅色背景。您的代碼會是這個樣子：

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

使用CSS添加背景顏色，就像這樣：

.divClass{ 
background: green; 
} 

.divClass.falseClass{ 
background: red; 
}

如果你想添加一個div與一些特定的文本（說什麼「身份識別碼'標記），然後更改顏色，可以先添加div。

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

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

來源

2013-04-25 14:18:30 ckersch

謝謝我使用了你的建議，並將它與一些我認爲合理並想出來的東西結合起來。請看以下我的答案。 – NoviceDeveloper 2013-04-25 15:21:37

這對我來說最好的工作：

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

來源

2013-04-25 15:24:03 NoviceDeveloper

使用jQuery響應HTML元素以更改DIV的背景和文本

回答

相關問題