Как динамически добавлять строку с помощью 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); 
}); 

Это работает. См. Jsfiddle: https://jsfiddle.net/7765fvjf/6/

Answer 3

Вы были близки. Просто укажите идентификатор абзаца.

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>