2

私はjQueryの初心者です。私は1つのdivを持っています。その下に色のリストがあります。それらの色をクリックすると、divの背景色がクリックされた色に変わります。コードの私のマークアップはこのようなものです

<h2>jQuery Bg</h2>
  <div id="box"></div>
  <ul>
    <li><a id="red" href="">Red</a></li>
    <li><a id="green" href="">Green</a></li>
    <li><a id="blue" href="">Blue</a></li>
    <li><a id="black" href="">Black</a></li>
  </ul>

cssはこんな感じ

 <style type="text/css">
    #box {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
    }
  </style>

そして、私がこれまでに試したjQueryはこのようなものです

<script type="text/javascript">
  $(document).ready(function() {
    $("a").click(function(event) {
        //alert(event.target.id);
        var bgcolor = event.target.id ;
      jQuery('div#box').css('background','bgcolor');
    });
});
</script>

それで、誰か親切にこれを行う方法を教えてもらえますか?

4

7 に答える 7

2

変化する

var bgcolor = event.target.id ;
jQuery('div#box').css('background','bgcolor');

に

var bgcolor = $(this).attr('id');
$('div#box').css('background-color',bgcolor);

背景色を使用する必要があります

于 2013-10-03T10:49:08.727 に答える
2

私はこれを好むでしょう：

 $(document).ready(function() {
            $("#box a").click(function(event) {
              $('div#box').css('background-color', $(this).attr('id') );
            });
        });
于 2013-10-03T10:56:36.373 に答える
1

これは文字列リテラルでbgcolorはない変数です

jQuery(function ($) {
    $("a").click(function (event) {
        var bgcolor = this.id;
        $('div#box').css('background', bgcolor);
        event.preventDefault()
    });
});

デモ:フィドル

于 2013-10-03T10:47:51.480 に答える
1

css()文字列ではなく、変数自体として値を設定する必要があります。これを試して：

$("a").click(function(e) {
    e.preventDefault();
    var bgcolor = this.id;
    jQuery('#box').css('background-color', bgcolor);
});

フィドルの例

いくつかのメモ; まず id 属性は一意であるため、必要なのは のみで#box、 は必要ありませんdiv#box。また、設定したいのはbackground-color. background色のみを設定すると、他のすべてのプロパティ ( など) がリセットされbackground-repeat、background-image後で問題が発生する可能性があります。最後に、shortedthis.idを使用して、クリックされた要素の ID を取得できます。preventDefault()最後に、ページから移動するリンクのデフォルトの動作を停止するために を使用する必要があります。

于 2013-10-03T10:48:57.517 に答える
1

以下のコードに従ってコードを変更します。

<script type="text/javascript">
    $(document).ready(function() {
        $("a").click(function(event) {
            var bgcolor = $(this).attr('id');
            jQuery('div#box').css({background:bgcolor});
        });
    });
</script>
于 2013-10-03T10:50:47.313 に答える
1

アンカーから href を削除して html を変更し、ポストバックを回避します

 <h2>jQuery Bg</h2>
  <div id="box"></div>
  <ul>
    <li><a id="red" >Red</a></li>
    <li><a id="green" >Green</a></li>
    <li><a id="blue" >Blue</a></li>
    <li><a id="black">Black</a></li>
  </ul>

そして、jquery の 1 行を変更して、

jQuery('div#box').css('background','bgcolor');

に

jQuery('div#box').css('background',bgcolor);

これが実際のデモです

于 2013-10-03T10:50:52.453 に答える