我正在尝试使用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>
答案 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;每次用户选择新颜色时,动态调整并更改内容。
<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;
答案 2 :(得分:2)
从一开始就让colorLabel span
显示更为有用 - 使用id
- 并且只更新其内容,而不是周围的内容p
只会让事情复杂化。
其次,使用change
事件更合适。
最后,使用trigger()
,您也可以在页面加载时启动该功能:
$('#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;
答案 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: