Discussions

Q数が増えても減っても、後から編集しないでいいようにしたい!

バナーの数が3個以下の時にifの最初の条件が適用されて、4個以上のときにはelseの文が指定されるようにしたいのですが、どのように組み込んでいいかわかりません。
上記条件の際に、さらにdisplaySlideQtyの値も変更したいです。
これは、画面上に何個表示するかというものなので、3個以下は3、4個以上は4にしたいです。

画像なので表示されていませんが、右端のバナーの右と左端のバナーの左に横に移動するボタンがあります。

お手数ですが、よろしくおねがいします。

Sample Code

AAnswer to: 数が増えても減っても、後から編集しないでいいようにしたい!

kyo_ago

若干意図を違えているかもしれませんが、こんな感じでしょうか?
大きく変えたのは以下の2箇所です。

「cssText」での設定はできないので、widthへ修正しました。
> if ( setNum < 4 ){
> $("#info .bx-window").css("width", "678px !important");
> } else {
> $("#info .bx-window").css("width", "904px !important");
> }

displaySlideQtyに値を設定する場所へ条件を追加しました。
> $('#slider1').bxSlider({
> displaySlideQty: (setNum < 4 ? 3 : 4),
> moveSlideQty: 1
> });

// 表示確認のためにhtml部分を色々いじってます

juny

これが3個の場合の表示例です。

>kyo_ago様

ご回答ありがとうございます。

「cssText」での設定はできないとあるのですが、!importantがある場合、widthで設定しても反映されないようです。
なので、色々調べた結果「cssText」でなら問題ないという答えがでたのですが・・・。

参考URLです。
http://www.deshape.com/jquery/jqueryのcssでimportantが効かない場合/

kyo_ago

>「cssText」での設定はできないとあるのですが、!importantがある場合、widthで設定しても反映されないようです。
>なので、色々調べた結果「cssText」でなら問題ないという答えがでたのですが・・・。
>
>参考URLです。
>http://www.deshape.com/jquery/jqueryのcssでimportantが効かない場合/

お。たしかにcssTextでできますね(始めて知りましたw)

再度修正してみました。
これまでcssTextで設定できなかったのはbxSlider内でbx-windowのstyle属性を上書きしていたのが原因のようです。
$("#info .bx-window")へのstyle変更をbxSliderのあとに移動し、.attr("style")で反映するよう修正しました。
firefox4+firebugでwidth: 678px !importantが設定されていることを確認しました。

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag