37

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

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

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

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

x ? y: z

だから私はこれを試しましたが、おそらく正しくないことはわかっていました

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

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

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

疑問符の前の最初の行が問題の原因だと思いますが、ifステートメントを作成するにはどうすればよいですか？

4

9 に答える 9

70

私はそのようなコードで行きます：

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

backgroundそれを機能させるには、最初にCSSを変更し、宣言からを削除し、次の#blackbox2つのクラスを追加する必要があります。

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

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

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

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

于 2011-07-06T11:53:24.770 に答える
5

ダンとニコラには適切な修正されたコードがあると思いますが、元のコードが機能しなかった理由がはっきりしない場合があります。

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

LogicalORExpression ? AssignmentExpression : AssignmentExpression

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

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

于 2011-07-06T13:59:13.000 に答える
4

私がやる（キャッシュを追加）：

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値を返すように最初の演算子を変更する必要がありました

于 2011-07-06T11:28:11.273 に答える
2

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

あなたが間違っていることが最初にわかるのは、最初の式がブール値またはブール値に変換できる賢明なものを返さないということです。最初の式は常にブール値としての意味のある解釈を持たないjQueryオブジェクトを返しますが、それが変換するのはおそらく不変の解釈です。読みやすさのために他に問題がない場合は、ブール値の解釈がよく知られているものを返すのが常に最善です。

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

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

これのフィドルはここにあります：http：//jsfiddle.net/chrisvenus/wSMnV/（オリジナルに基づく）

于 2011-07-06T11:45:04.043 に答える
1

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

編集：申し訳ありませんが、トグルは単なる可視性です、私はそれがあなたのbgカラートグルを助けるとは思わない。

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

var box = $("#blackbox");
box.css('background') == 'pink' ? box.css({'background':'black'}) : box.css({'background':'pink'});
于 2011-07-06T11:29:59.613 に答える
1

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

于 2011-07-06T11:27:44.800 に答える
0

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

$("#blackbox").css({'background': 
    $("#blackbox").css('background') === 'pink' ? 'black' : 'pink'});
于 2011-07-06T11:29:11.197 に答える
0

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

比較で発生する可能性のある問題は、Webカラーが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'));

デモ

于 2011-07-06T13:02:46.990 に答える
0

関数のサイドでの実際の例を次に示します。

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）」の値を使用します。

于 2019-08-12T13:07:29.247 に答える