如何使用jquery动态附加字符串?

时间:2016-12-31 09:39:37

标签: javascript jquery html

我正在尝试使用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>

4 个答案:

答案 0 :(得分: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);
});

这很有效。见jsfiddle:https://jsfiddle.net/7765fvjf/6/

答案 1 :(得分:2)

你可以这样做,添加一个&#34;颜色&#34;每次用户选择新颜色时,动态调整并更改内容。

&#13;
&#13;
<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>
&#13;
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="@style/Theme.Leanback"></style>
<style name="NoTitleTheme" parent="@style/Theme.Leanback">
    <item name="browseRowsMarginTop">5dp</item>
</style>
</resources>
&#13;
&#13;
&#13;

答案 2 :(得分:2)

从一开始就让colorLabel span显示更为有用 - 使用id - 并且只更新内容,而不是周围的内容p只会让事情复杂化。

其次,使用change事件更合适。

最后,使用trigger(),您也可以在页面加载时启动该功能:

&#13;
&#13;
$('#dropdlist').on('change', function()  {
  var $color = $('#dropdlist :selected').text();
  $('body').css('background', $color);
  $("#colorLabel").text($color);
}).trigger('change');
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

你很亲密。只需为段落提供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/