web-dev-qa-db-ja.com

jQueryで三項演算子条件を書く方法は？

このフィドル http://jsfiddle.net/mjmitche/6nar4/3/ で、たとえば、小さな青いボックスを黄色のボックスにドラッグすると、大きな黒いボックスがピンクに変わります。左側にある4つのボックスはすべて、ブラックボックス内のボックスにドラッグできます。

フィドルの終わりに、ブラックボックスをピンクに変更するコードが表示されます。

しかし、それを三項演算子にしたいので、ボックスが黒の場合はピンクになりますが、ピンクになった場合は黒に戻ります。

私は三項がこのようであることを知っています

x ? y: z

だから私はこれを試しました

$("#blackbox").css({'background':'pink'}); ?

    $("#blackbox").css({'background':'black'}); : 

$("#blackbox").css({'background':'pink'});

疑問符の前の最初の行が問題を引き起こしていると思うので、ifステートメントを作成する方法は？

javascriptjqueryternary
33
Leahcim

私はそのようなコードで行くだろう：

var oBox = $("#blackbox");
var curClass = oBox.attr("class");
var newClass = (curClass == "bg_black") ? "bg_pink" : "bg_black";
oBox.removeClass().addClass(newClass);

動作させるには、まずCSSを変更し、#blackbox宣言からbackgroundを削除し、これらの2つのクラスを追加する必要があります。

.bg_black { background-color: #000; }
.bg_pink { background-color: pink; }

そして、最初にクラスbg_blackをblackbox要素に割り当てます。

更新されたjsFiddle： http://jsfiddle.net/6nar4/17/

私の意見では、他の回答よりも読みやすいですが、もちろん選択するのはあなた次第です。

63
Shadow Wizard

ダンとニコラは適切な修正コードを持っていると思いますが、元のコードが機能しなかった理由がはっきりしないかもしれません。

ここで「三項演算子」と呼ばれているものは、ECMA-262セクション11.12では条件演算子と呼ばれます。形式は次のとおりです。

LogicalORExpression ? AssignmentExpression : AssignmentExpression

LogicalORExpressionが評価され、戻り値が（if条件の式のように）ブール値に変換されます。 trueと評価された場合、最初のAssignmentExpressionが評価されて戻り値が返され、そうでない場合は2番目が評価されて返されます。

元のコードのエラーは、試行された条件演算子を構文エラーのある一連のステートメントに変更する余分なセミコロンです。

4
RobG

私がしたい（キャッシュを追加した）：

_var bbx = $("#blackbox");
 bbx.css('background-color') === 'rgb(255, 192, 203)' ? bbx.css('background','black') : bbx.css('background','pink')
_

wroking fiddle（new AGAIN）： http://jsfiddle.net/6nar4/37/

css()が色のRGB値を返すため、最初の演算子を変更する必要がありました

4
Nicola Peluchetti

三項演算子は、ブール式に疑問符が続き、さらにコロンで区切られた2つの式として記述されます。

あなたが間違っていることが最初にわかるのは、最初の式がブール値やブール値に変換できる適切なものを返していないことです。最初の式は常に、ブール値としての理にかなった解釈を持たないjQueryオブジェクトを返しますが、変換後の変換はおそらく不変の解釈になります。読みやすくするために、他の人に害がなければ、よく知られているブール値の解釈を持つものを返すことをお勧めします。

2つ目は、各式の後に間違っているセミコロンを入れていることです。実際には、これは「構成の終わり」と言っているため、三項演算子を壊しています。

ただし、この状況では、おそらくこれをより簡単に行うことができます。クラスとtoggleClassメソッドを使用すると、簡単にクラスのオンとオフを切り替えることができ、そのクラス定義にスタイルを入れることができます（コメントでクラスの使用を提案する@yoavmatchulskyに称賛）。

このフィドルはここにあります： http://jsfiddle.net/chrisvenus/wSMnV/ （元に基づいて）

2
Chris

三項演算子は、最初の部分がブール値を返すため機能します。あなたの場合、jQueryのcssメソッドはjQueryオブジェクトを返すため、3項演算には無効です。

1
Saeed Neamati

あなたがやろうとしているように見えることから、 toggle はあなたの問題をより良く解決するかもしれません。

編集：申し訳ありませんが、トグルは単なる可視性であり、あなたの背景色の切り替えに役立つとは思わない。

しかし、ここに行きます：

var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});
1
Dan

以下は、関数の側面の実際の例です。

_function setCurrency(){
   var returnCurrent;
   $("#RequestCurrencyType").is(":checked") === true ? returnCurrent = 'Dollar': returnCurrent = 'Euro';
   
   return returnCurrent;
}_

あなたの場合。セレクターと戻り値を変更する

$("#blackbox").css('background-color') === 'pink' ? return "black" : return "pink";

最後に、ブラウザで使用される値が何であるかを知るには、コンソールで次を実行します。

$("#blackbox").css('background-color')

そして、色の選択に16進数の代わりに「rgb（xxx.xxx.xxx）」値を使用します。

0
Sergio Rodriguez

また、三項演算子はステートメントではなく式を想定しています。三項演算子の最後でのみセミコロンを使用しないでください。

$("#blackbox").css({'background': 
    $("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});
0
Karoly Horvath

他の人が正しく指摘しているように、三項の最初の部分はtrueまたはfalseを返す必要があり、質問では戻り値はjQueryオブジェクトです。

比較で発生する可能性のある問題は、 ウェブの色 がRGBに変換されるため、3項の条件でそれをテキスト化する必要があることです。

CSSの場合：

#blackbox {
    background:pink;
    width:10px;
    height:10px;
}

次のjQueryは色を反転します。

var b = $('#blackbox');
b.css('background', (b.css('backgroundColor') === 'rgb(255, 192, 203)' ? 'black' : 'pink'));

デモ

0
andyb