Question

我正在使用从jQuery v1.9.1编写的jquery quiz plugin，并在发行版中包含该版本。当我尝试使用包含后来的jQuery v1.11.1的当前jQuery Mobile时，测验有以下问题：

即，答案不再排列在径向按钮旁边，就像我使用插件包含的旧jquery时那样，我不想这样做，因为它会导致页面中出现其他问题。

最好的解决方法是在slickQuiz.js

中执行此标记的代码

                    // prepare a name for the answer inputs based on the question
                    var selectAny     = question.select_any ? question.select_any : false,
                        forceCheckbox = question.force_checkbox ? question.force_checkbox : false,
                        checkbox      = (truths > 1 && !selectAny) || forceCheckbox,
                        inputName     = $element.attr('id') + '_question' + (count - 1),
                        inputType     = checkbox ? 'checkbox' : 'radio';

                    if( count == quizValues.questions.length ) {
                        nextQuestionClass = nextQuestionClass + ' ' + lastQuestionClass;
                    }


                     for (i in answers) {
                            if (answers.hasOwnProperty(i)) {
                                answer   = answers[i],
                                optionId = inputName + '_' + i.toString();

                                // If question has >1 true answers and is not a select any, use checkboxes; otherwise, radios
                                var input = '<input id="' + optionId + '" name="' + inputName +
                                            '" type="' + inputType + '" /> ';

                                var optionLabel = '<label for="' + optionId + '">' + answer.option + '</label>';

                                var answerContent = $('<li></li>')
                                    .append(input)
                                    .append(optionLabel);
                                answerHTML.append(answerContent);
                            }
                        }

您能否告诉我需要更改的内容，因此每个答案选项，即“1”，“2”和“3”再次与径向按钮保持一致？

我在eclipse中本地运行它。这是我在FireFox中看到的内容：

view-source:file:///C:/Users/Reto/eclipse-workspace/Site/WebContent/Test.html


  <div class="collapse" data-role="collapsible" data-mini="true" data-     collapsed-icon="carat-r" data-expanded-icon="carat-d"
  data-collapsed="false" data-content-theme="false">
     <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
  <div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
  </div>
  <h4>Getting Started</h4>
  <p>I'm the collapsible content without a theme.</p>

  <h1 class="quizName">Quiz/Prep to continue on</h1>
  <div id="slickQuiz">

    <div class="quizArea">
      <div class="quizHeader">
        <!-- where the quiz main copy goes -->

        <a class="button startQuiz" href="#">Get Started!</a>
      </div>

      <!-- where the quiz gets built -->
    </div>

    <div class="quizResults">
      <h3 class="quizScore">
        You Scored: <span> <!-- where the quiz score goes -->
        </span>
      </h3>

      <h3 class="quizLevel">
        <strong>Ranking:</strong> <span> <!-- where the quiz ranking level goes -->
        </span>
      </h3>

      <div class="quizResultsCopy">
        <!-- where the quiz result copy goes -->
      </div>
    </div>
  </div>

</div>

Answer 1

jQuery Mobile中包含的css改变了测验显示。所以在分发slickQuiz.js文件中，我强制样式内联如下：

var optionLabel = '<label style="display:inline" for="' + optionId + '">' + answer.option + '</label>';

jquery：为什么内容会在下一行？

1 个答案: