1

私の質問は、 Reduce multiple if else ステートメントに非常に似ています

複数の if else ステートメントがあり、jquery each 関数を使用してコードをより効率的にしたいのですが、その方法がわかりません。

私はワードプレスでjQueryを実行していますが、これはnoconflictモードで実行されると信じています。そのため、適切な機能を理解できないため、私にとってうまくいく例を提供する高度なトピック（私が考えているもの）を取得することはできません。使用する構文。

誰かが私のためにそれを行う方法を助けて説明できれば、それは素晴らしいことです. これが私のコードです：

var $h6p = $("h6 + p");
var $h5p = $("h5 + p");
var $h4p = $("h4 + p");
var $h3p = $("h3 + p");
var $h2p = $("h2 + p");
var $h1p = $("h1 + p");
var $fullercolor_bg = "rgba(240,234,222,0.9)";

if($h1p.mouseIsOver()) {
    $h1p.prev().css("background-color", $fullercolor_bg);
} else {
    $h1p.prev().css("background-color", "");
}
if($h2p.mouseIsOver()) {
    $h2p.prev().css("background-color", $fullercolor_bg);
} else {
    $h2p.prev().css("background-color", "");
}
if($h3p.mouseIsOver()) {
    $h3p.prev().css("background-color", $fullercolor_bg);
} else {
    $h3p.prev().css("background-color", "");
}
if($h4p.mouseIsOver()) {
    $h4p.prev().css("background-color", $fullercolor_bg);
} else {
    $h4p.prev().css("background-color", "");
}
if($h5p.mouseIsOver()) {
    $h5p.prev().css("background-color", $fullercolor_bg);
} else {
    $h5p.prev().css("background-color", "");
}
if($h6p.mouseIsOver()) {
    $h6p.prev().css("background-color", $fullercolor_bg);
} else {
    $h6p.prev().css("background-color", "");
}

(CSS に以前の隣接する兄弟セレクターがあった場合、この時点で大喜びするでしょう。)

編集：これまでの助けに感謝します。私が言及すべきことの1つは、elseステートメントの空の設定が意図的であることです。CSS を使用して兄弟セレクターをターゲットにし、背景色が設定されているので、それを設定する必要があります。透明ではありません。

4

3 に答える 3

5

:headerセレクターを使用して、このようなことができるかもしれません。

$(':header + p').each(function () {
    var $this = $(this);

    $this.prev().css({
        backgroundColor: $this.mouseIsOver()? 'rgba(240,234,222,0.9)' : 'transparent'
    });
});
于 2013-08-07T13:10:59.630 に答える
2

配列を使用できます：

var $hp = ["h6 + p", "h5 + p", "h4 + p", "h3 + p", "h2 + p", "h1 + p"],
    $fullercolor_bg = "rgba(240,234,222,0.9)";

$hp.forEach(function(v) {
    if($(v).mouseIsOver()) {
        $(v).prev().css({
            backgroundColor: $fullercolor_bg
        });
    } else {
        $(v).prev().css({
            backgroundColor: "transparent"
        });
    }
});

あなたの場合、変数内で複数の CSS セレクターを使用する方が簡単だと思います。これは、の実装に応じて機能する場合と機能しない場合がありmouseIsOverます。

var $hp = $("h6 + p, h5 + p, h4 + p, h3 + p, h2 + p, h1 + p"),
    $fullercolor_bg = "rgba(240,234,222,0.9)";

if($hp.mouseIsOver()) {
    $hp.prev().css({
        backgroundColor: $fullercolor_bg
    });
} else {
    $hp.prev().css({
        backgroundColor: "transparent"
    });
}
于 2013-08-07T12:59:15.243 に答える
1

単一の jQuery オブジェクト内のすべての要素を取得するセレクターを作成し、eachメソッドを使用してそれらをループ処理します。

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  if($(el).mouseIsOver()) {
    $(el).prev().css("background-color", $fullercolor_bg);
  } else {
    $(el).prev().css("background-color", "");
  }
});

または、条件演算子を使用して値を選択します。

var $fullercolor_bg = "rgba(240,234,222,0.9)";

$("h6 + p,h5 + p,h4 + p,h3 + p,h2 + p,h1 + p").each(function(i, el){
  $(el).prev().css("background-color", $(el).mouseIsOver() ? $fullercolor_bg : "");
});
于 2013-08-07T13:01:50.713 に答える