Jquery 在主干中单击按钮时显示/隐藏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;
    }
});

如您所见，我将类名设置为“问题框隐藏”，但它隐藏了所有div

这是我的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>

变量id=；
var yes_id=；
var no_id=；
如果（id==1）
{
$（'div.question box'）.attr（'class'，'question box show'）；
}
如果（id！=8&&id！=9&&id！=6）
{
$（'.hs'）
.append（'是'）
.append（'No'）；
}         
else if（id==6）
{
$（'.hs'）
.append（'确定'）
.append（‘取消’）；
}         

该项目是一个有条件的分支站点。因此，第一个框必须始终出现。然后根据回答的问题，应显示不同的框。（我想我知道怎么做。我想我可以创建一个函数，将疑问号作为参数，然后显示该框。我可以在按钮中添加onclick选项。不过我还没有尝试过） 我非常感谢你的帮助

---

多谢各位

我认为您确实可以避免在html文件中使用js代码，尝试在视图中使用js代码—使用主干更有意义

我不能完全理解你的意思。但是我有一些建议可以帮助你。 如果希望在单击按钮时显示元素，可以执行以下操作

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

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

代码中的问题可能在这里： $（'div.question box'）.attr（'class'，'question box show'）

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

---

希望有帮助

有9个问题，每个问题都在它自己的div中。按钮也应该在div中。然后，当单击yes时，它应该根据存储在主干集合中的yes_id显示另一个问题。所以，为了触发click事件，我应该将按钮放在index.html中，对吗？但我不明白，如果单击“是”或“否”，主干视图如何知道要显示哪个div。是的，您需要在index.html中包含按钮。当您单击“是”按钮时，您会告诉我应该使用jquery显示with div。该按钮起作用，但我的div仍然不能执行我希望它执行的操作。它要么显示全部，要么不显示。我有另一个视图App.view.Questions，其中包含这个.collection.each（this.addOne，this）和render函数。我认为这是从我上面的另一个观点将所有问题加载到div。如何在主干网中仅获取一个收藏项目？将我添加到skype上，也许我可以更好地帮助您。。。xprenan