為什么我的jQuery函數不傳遞參數並更改它？

Question

我正在嘗試使用參數顏色設置功能。 然后，我試圖獲取輸入的輸入文本，並通過傳遞參數來根據輸入的文本更改div的顏色。

我目前的嘗試無效，請提供任何幫助或想法？

html片段

    <div class="bulb" id="bulb1"></div>
    <button id="setColor">Color set</button>
    <input type="text" id="colorText"></input>

jQuery的

$( document ).ready(function() {


    $('#setColor').click(function()
    {
        $( "#colorText" ).is( color );

        setColor(color);

        $('#colorText').val('');

    });


});

function setColor(color){

    $('#bulb1').css({'background-color': color});   

}

Answer 1

像這樣做：

$( document ).ready(function() {


  $('#setColor').click(function()
  {
    var color = $( "#colorText" ).val();  // Get the color in the input box.

    setColor(color);

    $('#colorText').val('');

  });


});

function setColor(color){

   $('#bulb1').css({'background-color': color});   

}

在這里，您可以： http : //jsfiddle.net/mwjfz7tq/

Answer 2

試試這個（我已經為您的div添加了一些高度和寬度，以便可見）：

<div class="bulb" style="height:50px; width:50px" id="bulb1"></div>
<button id="setColor">Color set</button>
<input type="text" id="colorText"></input>

這是JS（我已對其進行了更改，以捕獲文本並將其傳遞給setColor函數。）：

$( document ).ready(function() {

    $('#setColor').click(function()
    {
        var c = $( '#colorText' ).val();
        setColor(c);

        $('#colorText').val('');
    });
});

function setColor(color){
    $('#bulb1').css({'background-color': color});
}