如何使用jquery動態追加一個字符串？

Question

我想使用jquery將從下拉菜單中選擇的值附加到正文中的元素。 要仔細檢查下拉列表是否返回任何值，我使用jquery更改頁面的背景顏色，該顏色有效。但是，我不能夠有條件地顯示顏色名稱after()的<p></p>元素：

小提琴：https://jsfiddle.net/7765fvjf/

$('#dropdlist').on('mouseenter mouseleave', function() { 
 
var $color = $('#dropdlist :selected').text(); 
 
$('body').css('background', $color); 
 
var $colorName = $('.colorName'); 
 
var newColor = ("<p class='colorLabel'>" + $color + "</p>"); 
 
var $colorLabel= $('.colorName',$newColor); 
 

 
if (!$colorLabel[0]) $colorName.after(newColor); 
 
else $colorName.replaceWith(newColor) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='dropdlist'> 
 
    <option value="green">green</option> 
 
    <option value="yellow">yellow</option> 
 
    <option value="blue">blue</option> 
 
</select> 
 
<p id='tt' class='colorName'> 
 
The background color is: 
 
</p>

Answer 1

似乎更加有用的本colorLabel span從一開始 - 與id - 只有更新其內容，周圍p的不是其內容僅事情複雜化。

其次，使用change事件更合適。

最後，trigger()可以啓動在頁面加載的功能，以及：

$('#dropdlist').on('change', function() { 
 
    var $color = $('#dropdlist :selected').text(); 
 
    $('body').css('background', $color); 
 
    $("#colorLabel").text($color); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='dropdlist'> 
 
    <option value="green">green</option> 
 
    <option value="yellow">yellow</option> 
 
    <option value="blue">blue</option> 
 
</select> 
 
<p id='tt' class='colorName'> 
 
The background color is: <span id="colorLabel"></span> 
 
</p>

Answer 2

你有一個語法錯誤：Uncaught ReferenceError: $newColor is not defined。

更新JS代碼：

$('#dropdlist').on('change', function() { 
    var $color = $('#dropdlist :selected').text(); 
    $('body').css('background', $color); 
    var htmlTarget = $('.colorName span'); 
    var newColor = ("<p class='colorLabel'>" + $color + "</p>"); 
    var $colorLabel= $('.colorName',newColor); 

    htmlTarget.html(newColor); 
    //else $colorName.replaceWith(newColor); 
}); 

這工作。看到j​​sfiddle：https://jsfiddle.net/7765fvjf/6/

Answer 3

你很近。只需爲該段落提供一個ID即可。

HTML：

<select id="dropdlist"> 
    <option value="volvo">green</option> 
    <option value="saab">yellow</option> 
    <option value="mercedes">blue</option> 
</select> 
<p id="para"></p> 

的JavaScript：

$('#dropdlist').on('change', function() { 
    var $color = $('#dropdlist :selected').text(); 
    $('body').css('background', $color); 
    var $colorName = $('.colorName'); 
    $('#para').html('The background color is ' + $color) 
}); 

的jsfiddle：

https://jsfiddle.net/nikdtu/weqo1y30/

Answer 4

您可以這樣做，添加一個「顏色」範圍並在用戶每次選擇新顏色時動態更改其內容。

$('#dropdlist').on('mouseenter mouseleave', function() { 
 
    var $color = $('#dropdlist :selected').text(); 
 
    $('body').css('background', $color); 
 
    // change the text of ".color" span 
 
    $(".color").html($color); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id='dropdlist'> 
 
    <option value="green">green</option> 
 
    <option value="yellow">yellow</option> 
 
    <option value="blue">blue</option> 
 
</select> 
 
<p id='tt' class='colorName'> 
 
The background color is: <span class="color"></span> 
 
</p>