0

次のように、水平方向と垂直方向の間でクラスをシャッフルする複数条件の三項演算子を正常に実装しました。

jquery:

<script type="text/javascript">
  $(document).ready(function() {
      $("#my_div")
     .removeClass("horizontal vertical")
     .addClass( ['red', 'blue', 'green', 'gray'].indexOf(my_color) != -1 ? 'horizontal' : 'vertical');
});
</script>

my_color は、赤、青、緑、灰色、白、および黒から一度に 1 つの値を持つことができます。上記のようhorizontalに、最初の 4 つのmy_color値とverticalその他のクラスを設定します。ellipticalここで、水平、垂直、楕円が my_color の 2 つの値のみに設定されている3 番目のクラスを追加および削除したいと考えています。上記のスクリプトを変更したり、switch ステートメントを使用して同じものを実装するにはどうすればよいですか?

4

1 に答える 1

1

スイッチでtoggleClassを使用すると、クラスを簡単に追加/削除できます。

$(document).ready(function() {
   var colors = ['red', 'blue', 'green', 'gray'];
   $("#my_div")
      .toggleClass('horizontal', colors.indexOf(my_color) != -1)
      .toggleClass('vertical', colors.indexOf(my_color) == -1)
      .toggleClass('elliptical', [colors[0], colors[1]].indexOf(my_color) != -1);
});

色が配列と一致する場合は最初のクラスが追加され、一致しない場合は削除されます。2番目は反対で、色が1番目または2番目の配列値と一致する場合は3番目のクラスが追加されます。array.indexOfはすべてのブラウザでサポートされているわけではないため、おそらくポリフィルを使用する必要があります。

于 2013-01-31T15:37:44.650 に答える