Question

我正在尝试使用jquery将从下拉菜单中选择的值附加到正文中的元素。要仔细检查下拉列表是否返回任何值，我使用jquery更改页面的背景颜色，这是有效的。但是，我无法有条件地显示after()元素的颜色名称<p></p>：

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

您遇到语法错误：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/

Answer 2

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

＆＃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;

Answer 3

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

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

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

＆＃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;

Answer 4

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

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

4 个答案: