显示/隐藏div中的按钮点击骨干网

这对你们来说可能非常简单，但是因为我在学习骨干和jquery，所以我很难弄明白这一点。显示/隐藏div中的按钮点击骨干网

当页面第一次加载时，我希望它只显示一个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选项，尽管如此，我还没有尝试过）我非常感谢你的帮助。

谢谢。

来源

2014-06-20 user1828605

我认为你真的可以避免HTML文件内的js代码，尝试在你的视图内部做到这一点，它使用主干更有意义。

我完全不明白你的意思。但我有一些提示可以帮助你。如果你想单击一个按钮时显示一个元素，你可以做这样的事情。

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

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

也许在你的代码中的问题都可以在这里： $（“DIV。提问框”）ATTR（“类”，“问题框显示”）。

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

希望它有帮助！

来源

2014-06-20 17:23:51 rcarvalho

有9个问题，每个问题都有自己的div。按钮也应该在div内。然后，当单击是时，它应该显示另一个基于存储在主干集合中的yes_id的问题。所以，为了点击事件触发，我应该把按钮放在index.html中，对吧？但我不明白如果单击是或否，骨干视图将知道显示哪个div。 – user1828605

是的，你需要在index.html里面有你的按钮。当你点击'是'按钮时，你会告诉div应该使用jquery显示。 – rcarvalho

该按钮有效，但我的div仍然没有做我想做的事。它显示全部或不显示。我有另一个视图App.View.Questions里面有this.collection.each（this.addOne，this）里面的渲染函数。我认为这是从我上面的其他观点加载所有的问题。我如何只能在骨干中获取一个收藏品？ – user1828605

显示/隐藏div中的按钮点击骨干网

回答

相关问题