如何使用jquery动态追加一个字符串？

我想使用jquery将从下拉菜单中选择的值附加到正文中的元素。要仔细检查下拉列表是否返回任何值，我使用jquery更改页面的背景颜色，该颜色有效。但是，我不能够有条件地显示颜色名称after()的<p></p>元素：如何使用jquery动态追加一个字符串？

小提琴：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>

来源

2016-12-31 Dambo

似乎更加有用的本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>

来源

2016-12-31 09:52:45 trincot

你有一个语法错误：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); 
});

这工作。看到jsfiddle：https://jsfiddle.net/7765fvjf/6/

来源

2016-12-31 09:45:19

对不起我的问题很可能不清楚，我试图附加/替换值作为当声明会建议 – Dambo

编辑替换现有的字符串，而不是追加。 –

你很近。只需为该段落提供一个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/

来源

2016-12-31 09:47:49

您可以这样做，添加一个“颜色”范围并在用户每次选择新颜色时动态更改其内容。

$('#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>

来源

2016-12-31 09:51:32

如何使用jquery动态追加一个字符串？

回答

相关问题