顯示/隱藏div中的按鈕點擊骨幹網

Question

這對你們來說可能非常簡單，但是因爲我在學習骨幹和jquery，所以我很難弄明白這一點。

當頁面第一次加載時，我希望它只顯示一個div（幾個），並在單擊Yes/No按鈕時開始顯示其他div。我還使用Twitter的引導的UI

這就是我對骨幹觀點：

App.Views.Question = Backbone.View.extend({ 
    tagName: 'div', 

    className: 'question-box hide', 

    template: template('questionTemplate'), 

    events: { 

    }, 

    initialize: function() { 
     this.model.on('reset', this.render, this); 
    }, 

    render: function() { 
     var editQuestionnaire = this.model.toJSON(); 
     console.log(this.$el.html(editQuestionnaire)); 
     this.$el.html(this.template(editQuestionnaire)); 
     //console.log(this.model); 
     return this; 
    } 
}); 

正如你所看到的，我設置的className爲「問題盒隱藏」，但它隱藏所有divs。

這裏是我的index.html

<div class="bs-docs-example bs-docs-question"> 
     <span class="badge badge-success"><%= question_id %></span> 
     <div class="span3 question-div"> 
      <h4 class="text-info"> 
       <%= question %> 
      </h4> 
      <div class="hs<%= question_id %>"></div> 
      <script type="text/javascript"> 
       var id = <%= question_id %>; 
       var yes_id = <%= yes_question_id %>; 
       var no_id = <%= no_question_id %>; 

       if(id == 1) 
       { 
        $('div .question-box').attr('class', 'question-box show'); 
       } 
       if(id != 8 && id != 9 && id != 6) 
       { 
        $('.hs<%= question_id %>') 
         .append('<button type="button" class="btn btn-primary">Yes </button>') 
         .append('<button type="button" class="btn btn-warning">No</button>'); 
       }   

       else if(id == 6) 
       { 
        $('.hs<%= question_id %>') 
         .append('<button type="button" class="btn btn-primary">OK </button>') 
         .append('<button type="button" class="btn btn-warning">Cancel</button>'); 
       }   

      </script> 

      <span class="span5"></span> 


     <div class="span4"></div> 
     </div> 

該項目是排序的條件分支網站。所以，第一個盒子總是必須出現。然後根據回答的問題，應該出現一個不同的方框。 （我想我知道如何做到這一點，我想我可以創建一個將question_id作爲參數的函數，然後顯示該框，我可以在按鈕中放置onclick選項，儘管如此，我還沒有嘗試過） 我非常感謝你的幫助。

謝謝。

Answer 1

我認爲你真的可以避免HTML文件內的js代碼，嘗試在你的視圖內部做到這一點，它使用主幹更有意義。

我完全不明白你的意思。但我有一些提示可以幫助你。 如果你想單擊一個按鈕時顯示一個元素，你可以做這樣的事情。

//Inside your view 
events: 
    "click #buton":"showElement" 

showElement:-> 
    @$("#div").addClass("someClassToShowTheDiv") 

也許在你的代碼中的問題都可以在這裏： $（「DIV。提問框」）ATTR（「類」，「問題框顯示」）。

正確的方法是： $（'div .question-box'）。addClass（'question-box show'）;

希望它有幫助！