1

Web ページ内に 3 つの列があります。各列には 3 つの正方形のグループがあり、正方形は固有の色を表します。したがって、ユーザーが列 1 の赤をクリックすると、列 1 内のテキストが赤になり、青の場合は青になります。ユーザーが列 2 内の緑色をクリックすると、列 2 内のテキストが緑色になります。

私はjQueryを初めて使用するので、これを正しく行ったかどうかわかりません。これが最善の方法であるかどうかを知りたいです。

私が知りたいのは、とにかくこれを変更して、各列にピッカーと呼ばれるスタイルが 1 つしかないことです。また、jQuery を 3 つの別個の関数に変更することはできますか?これを行うよりクリーンな方法はありますか?

ありがとう。

4

3 に答える 3

2

はい！CSS セレクターはすべて再利用可能です。まったく同じ属性と値を持つ複数のクラスを作成しないでください。

必要なすべての CSS クラス.col, .wrapper, .picker

複数の場所でコードを使用する場合は、div id を使用する代わりに jQuery を使用し、要素がイベントを発生させた要素に対して相対的な場所を特定するか、$(this)

フィドルをチェックしてください http://jsfiddle.net/WJ5DZ/1/

于 2013-06-12T19:48:40.473 に答える
0

この方法を試すことができます：

$(function () {
    $('.picker').css('background-color', function () { //Setup the background color for each picker square.
        return $(this).data('color'); //get its color from data attribute
    }).click(function () { //Chain it through for the click event
        $(this).closest('.content').css({ //get the parent content element where color needs to be applied
            color: $(this).data('color') //set the color as that of the clicked picker.
        });
    });
});

デモ

contentマークアップで、独自の親コンテンツを識別するためにsay というクラスを提供します。

<div class='col2 content' id="test1"> <!-- You don't need id if you are using this for selcting.

picker1, 2すべてのCSS ルールを削除し、 picker.

を使用closestすると、ピッカーにラッパーを追加する予定がある場合でも、実際のコンテンツ div が選択されます。

于 2013-06-12T19:47:38.710 に答える
0

はい、あります..すべてのクラス（picker1、picker2）を変更しpicker、id（test、test1 ..）を削除します

これを試して

   $('.picker').each(function(){
      var myColor = $(this).data('color');
      $(this).css({background: myColor })
   });
  $('.picker').click(function(){
     var myColor = $(this).data('color');
     $(this).parent().css({color: myColor});

  });

注：ループclick内のイベントは必要ありませんeach

ここでフィドル

于 2013-06-12T19:50:17.593 に答える