Question

这对你们来说可能非常简单，但由于我学习了骨干和jquery，我很难搞清楚这一点。

当页面首次加载时，我希望它只显示一个div（少数几个），并在单击Yes / No按钮时开始显示其他div。我也使用twitter bootstrap for 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设置为＆＃39;问题框隐藏＆＃39;，但它隐藏了所有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>

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

谢谢。

Answer 1

我认为你真的可以避免在html文件中使用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'）;

希望它有所帮助！

在骨干中单击按钮显示/隐藏div

1 个答案: