Question

我正在制作一个骨干测验应用程序，它使用下面的question_template将问题附加到div中。一旦第一个问题得到解答，第二个问题就会被附加，推下第一个问题，等等。一旦得到第三个问题，html单选按钮就会中断。我无法为第三个问题选择顶部按钮（回答红色）。但是，一旦第四个问题被加载，第三个问题被推下，我就可以选择第三个问题的红色按钮（虽然你不能再提交了，因为在回答问题后提交被设计禁用）。在第四个问题中，我无法选择前两个单选按钮。我在每个浏览器中遇到同样的问题。我已经发布了加载第3和第4个问题的屏幕图像。我想知道这个模板中是否有什么可以解释我遇到问题的原因。

更新：在您阅读所有内容之前，如果我使用prepend即$（'this.el'）将问题呈现给div，则可能有助于了解单选按钮的问题。 prepend，我想把这些问题添加到顶部。如果我使用追加$（'this.el'）。附加...单选按钮工作正常，但它不允许我向顶部添加新问题。

代码。！[

<fieldset id="qbquestion">
    <legend>{{= question }}</legend>
      <ul>
    {{ _.each(answers, function(answer) { }}

<li><input type="radio" name="{{= question }}" value="{{= answer  }}"/> <label for="{{= answer  }}">{{= answer  }}</label></li>

{{ }); }}
    </ul>

</fieldset>

      <input type="button" class="action_button" value="Submit" id="answer">

</script>][1]

图片说明

对于问题，“什么是M最喜欢的颜色”我无法选择“红色”按钮，直到它被按下。对于最重要的问题，我无法选择前两个按钮“粉红色”或“紫色”。目前数据库中只有四个问题。

enter image description here

更新这是问题“什么是M最喜欢的颜色”的“红色”单选按钮（无法选择的单选按钮）的CSS样式。如果我检查一个不同的单选按钮，样式是相同的。

enter image description here

更新问题的HTML，“什么是M最喜欢的颜色” enter image description here

QuestionView 更新，在渲染功能中，如果我使用$（'this.el'）。追加...然后生成的单选按钮工作。但是，我想$('this.el').prepend，所以将新问题添加到顶部。如果我使用前置，某些单选按钮不起作用。

var QuestionView = Backbone.View.extend({
    el: $(".east"), 
    initialize: function(){


    _.bindAll(this);
    this.compTemplates();
        this.model.bind("gameStartedEvent", this.render, this); 
    this.model.bind("guessCheckedEvent", this.nextQuestion, this);
    this.model.bind("nextQuestionReady", this.render, this);
    },

  events: {
      'click #answer': 'checkAnswer'

    },

  nextQuestion: function(){
    this.model.nextQuestion();
  },
  checkAnswer: function(e){
    $('#answer').attr("disabled", true);
    var selected = $("input[type='radio']:checked");
    var answer = selected.val();
    this.model.set({guess: answer});
     this.model.check();

  },
  compTemplates: function(){
    console.log("comp Templates in question view");
    _.templateSettings = {
        interpolate : /\{\{=(.+?)\}\}/g,
        escape : /\{\{-(.+?)\}\}/g,
        evaluate: /\{\{(.+?)\}\}/g
         };
    var template = $('#question_template').html();

    this.template = _.template(template);


  },

    render: function(response){

    var question = response.question; 
    var answers = response.answers;
    var link = response.link;
    this.correctanswer = response.correctanswer;

 $(this.el).append(this.template({ question: question, answers: answers, link: link})); 


    }


 });

Answer 1

我改变了很多东西，但不幸的是我不确定哪一个解决了这个问题。一，我停止使用具有相同id的多个元素，因为@mu太短了。我还改变了包含元素的一些位置样式，因为只有第三和第四个问题受到影响，这似乎是与分配给问题的空间量有关的问题。对不起，我是css的废话，无法解释更多。我还为每个问题创建了一个新视图new QuestionView();，而不是再次使用同一个视图，但是，我认为这是一个仅由css引起的问题。

某些单选按钮无法在模板中选择

1 个答案: