[toggleを使用しクリックイベントでCSSを書き変えたい]

Question

• やりたいこと

大元のCSSは書き換えられない(追加できない)ので、
書き換え用のCSSファイルを作成し、クリック時にそのCSSが適応されるようにしたい

1. Viewに設置されているボタンをクリック
2. デフォルトで表示されている要素(メニューなど)が消える
3. もう一度押すとデフォルトに戻る

• 疑問

1. ボタンクリックでイベント(CSS)切り替えをするには、クラスは２つ、ボタンは１つの方がいいのか

（現在はクラス２つ、ボタン２つで実装中）
2. クリックイベント時にCSSを書き換えるにはどのように記述したらよいか
3. 最初にデフォルト値(デフォルトは表示しておくとか)を設定しなければならないのか

• 現在のコード

view

<button id="off-btn">非表示</button> 
<button id="on-btn" >表示</button>

<!-- クリックで非表示にしたい要素 -->
<div id="content">

css

// クリック時非表示にする
#content{
  display : none;
}

js(Backbone)

 
  ui: {
    OffBtn : '#off-btn',
    OnBtn  : '#on-btn'
  },

  events: {
    'click @ui.OffBtn' : '_OffBtn',
    'click @ui.OnBtn'  : '_OnBtn',
  },

  _OffBtn : function(){
  
    console.log('offクリック'); // 非表示ボタンに反応

     // ボタンがクリックされたときイベント発火
     // コンテンツが消える

      var classname = 'content';
      this.ui.OffBtn.toggleClass(classname);
  },


  _OnBtn : function() {

    console.log('onクリック'); // 表示ボタンに反応

     // ボタンクリックでメデフォルトに戻す
     // var classname = 'content';
     // this.ui.OffBtn.toggleClass(classname);

    },

ご教授いただけますと幸いでございます。
宜しくお願い致します。

Answer 1

こんにちは。

CSSの書き換えは恐らくできないので、
通常はJSでクリックイベント発生時に

• クラスの追加/削除
• JQueryの.toggle()を使って要素の表示/非表示切り替え
• 要素のstyle属性を書き換える

などの対応をとるかと思います。

いずれかの対応に変えることは可能ですか？

Comments

[star24star]

ご回答下さいまして有難う御座います。
あやふやな言葉で申し訳ございません。

CSSを書き換える、というより、クリック時に指定したCSSを適応させる
といったイメージです。

(大元のCSSは書き換えず、別CSSファイルに#content{display:none;}と記載すると
此方の#content{display:none;}が適応されるので、これをクリックしたときだけ
適応させたい)

また、使用している言語はbackboneなので、そちらが好ましいです。

ご提示くださったtoggleの方も一旦確認してみたいと思います。
単純に非表示にするだけならtoggleClassではなくtoggleで良いのですね！

ちなみにstyle属性を書き換えるというのはどのような感じでしょうか？

[CyberMergina]

toggleは一番楽だと思います。
ですが、今回の場合非表示と表示ボタンを分けているので、.show()/.hide()でもいいかもしれません。

＞ちなみにstyle属性を書き換えるというのはどのような感じでしょうか？

- jqueryの書き方なら .css('display', 'none') / .css('display', 'block')
- javascriptの書き方なら document.getElementById('content').style.display = "none";

というふうに、なりますね。この場合はcssは必要なくなります。

[star24star]

ボタンの数に関しては特に拘りが無いのですが、
toggleを使用したいのでこれで行きたいと思います！
backboneとjqueryの書き方は殆ど似たような感じなのですね。

$('content').toggle()で切り替えできました！

[CyberMergina]

解決できたようで何よりです。

以下補足です。

>backboneとjqueryの書き方は殆ど似たような感じなのですね。

自分はbackboneに詳しくはないのですが、
どうやらjqueryも読み込むことによって、backboneの内部でもjqueryが使えるようです。
なので、セレクター部分もJQueryの書き方で指定出来たりもするそうです^^

[star24star]

読み込みさえすればjqueryはもちろん、
従来のjavascriptの書き方(document.getElementByIdのようなもの)でも
ちゃんと動作しました。有難うございました！