Question

我要做的是创建一个按钮，用标签上指定的颜色更改div容器的背景颜色。当我在我的控制台上运行它时，它表示我的变量尚未指定。

<div class="grid1">
  <input id="bgR" type="text"></input>
  <input id="bgG" type="text"></input>
  <input id="bgB" type="text"></input>
  <input id="change_bgColor" type="button" value="Change Background Color"></input>
</div>


$('#change_bgColor').click(function(){
  var rColor = $('#bgR').val();
  var gColor = $('#bgG').val();
  var bColor = $('#bgB').val();
  var newColor = "rgb("+ rColor +","+ gColor +"," + bColor + ")";
  $('#container').css("background-color", newColor);
});

我的代码确实包含一个#container我只是没有在这里发布，因为我不想发布我的所有代码。

http://jsfiddle.net/isherwood/muSgn/

Answer 1

添加ID为'container'的元素，一切都很好。

http://jsfiddle.net/isherwood/muSgn/3

<div id="container">
    <div class="grid1">
        <input id="bgR" type="text"></input>
        <input id="bgG" type="text"></input>
        <input id="bgB" type="text"></input>
        <input id="change_bgColor" type="button" value="Change Background Color"></input>
    </div>
</div>

Answer 2

看起来你错过了一些基本的东西。

您是否添加了jquery库，还包装了yo $（document）.ready（）{}

在jsfiddle工作正常检查这个。

http://jsfiddle.net/saWbn/1/

<div class="grid1">
  <input id="bgR" type="text"></input>
  <input id="bgG" type="text"></input>
  <input id="bgB" type="text"></input>
  <input id="change_bgColor" type="button" value="Change Background Color"></input>
</div>

<div id="container">
this is a container 
    </div>    


    $(document).ready(function() {
    $('#change_bgColor').click(function(){

  var rColor = $('#bgR').val();
  var gColor = $('#bgG').val();
  var bColor = $('#bgB').val();
  var newColor = "rgb("+ rColor +","+ gColor +"," + bColor + ")";
  $('#container').css("background-color", newColor);
});

    // Handler for .ready() called.
});

更改背景颜色不起作用。 JQuery的

2 个答案: