1

質問タブを検索したところ、jQuery の繰り返しコードに関する質問が以前に尋ねられていることがわかりましたが、特定の問題にそれを適用する方法をまだ理解できません。

以下は、ボックス内のテキストを赤、青、黒に変更する簡単なコードです。このボックスは 3 つあります。繰り返しを避けるためにこのコードを最小化するにはどうすればよいですか、ありがとう。

 $("div.box1").click(function () {
    colour=$(this).css("background-color");
    $("div.first").css("color", colour);
});

 $("div.box2").click(function () {
    colour=$(this).css("background-color");
    $("div.second").css("color", colour);
});

 $("div.box3").click(function () {
    colour=$(this).css("background-color");
    $("div.last").css("color", colour);
});
4

3 に答える 3

3

HTML を見ないと、これらのさまざまな要素がどのように関連しているかを理解するのは困難です。

ただし、できることの 1 つは、色が更新された要素のクラス名を HTML5 属性として保存することです。例えば：

<div class="box box1" data-otherdiv="first"></div>
<div class="box box2" data-otherdiv="second"></div>
<div class="box box3" data-otherdiv="third"></div>

次に、1 つの関数を使用するだけです。

$("div.box").click(function () {
    var $this = $(this); //creating a local "$this" object prevents multiple $(this) calls
    $("div." + $this.data("otherdiv")).css("color", $this.css("background-color"));
});
于 2013-01-31T12:08:34.003 に答える
0

機能のより一般的なバージョンを持つ関数を定義することから始めます。唯一の違いは、div のセレクターが色付けされるため、それをパラメーターとして取り出すと、

function setColor (divSelector) {
    var colour=$(this).css("background-color");
    $(divSelector).css("color", colour);
});

次に、このように使用します

$("div.box1").click(function () {
    setColor("div.first");
});
//...and so on for the following boxes

これよりもさらに賢く、たとえばに基づいて divSelector を選択するthisことができます。jQuery を使用して div.data()を接続できます。data-*jQuerys データを使用するのとは対照的に、古いブラウザーでも機能します。

これにより、コードを次のように変更できます

function setColor () {
    var self = $(this);
    var colour=self.css("background-color");
    $("div." + self.data('toBeColoured')).css("color", colour);
});

または、data-*HTML5 ブラウザのみをサポートする必要がある場合に使用します

そして、それを以下のように使用してください

$("div.box1").data('toBeColoured','first').click(setColor);
$("div.box2").data('toBeColoured','second').click(setColor);
$("div.box3").data('toBeColoured','last').click(setColor);

最初、2番目、最後は疑似セレクターを使用して選択できるため、多くの場合、ベースのクラスを順序付けする必要はありません

于 2013-01-31T12:32:40.083 に答える
-2

少なくとも 2 つの方法:

1)セレクター エンジンを使用して複数の要素を選択し、それらに関数を適用します。

 $("div.box1, div.box2, div.box").click(function () {
    colour=$(this).css("background-color");
    $("div.first").css("color", colour);
});

2)物事を行う機能を持ち、自分自身を繰り返さない ( DRY )

 function applyColor() {
   colour=$(this).css("background-color");
   $("div.second").css("color", colour);
 }
 $("div.box1").click(function () {
   applyColor();
 });

 $("div.box2").click(function () {
   applyColor();
 });

 $("div.box3").click(function () {
   applyColor();
 });
于 2013-01-31T12:06:44.507 に答える