jQuery:为什么内容在下一行?

问题描述

我使用的是 jquery测验插件，该插件是从jQuery v1.9.1开始编写的，包括发行版中的那个版本.当我尝试使用包含更高版本jQuery v1.11.1的当前jQuery Mobile时，测验出现以下问题:

I'm using a jquery quiz plugin that was written off of jQuery v1.9.1 and includes that version in the distribution. When I try to use the current jQuery Mobile which includes the later jQuery v1.11.1, the quiz has the following problem:

也就是说，答案不再像在径向按钮旁边排列一样，就像我使用插件随附的较旧的jquery时那样，我不想这样做，因为它会导致页面中出现其他问题.

Namely, the answers no longer line up next to the radial buttons,as they do when I use the plugin's included older jquery, which I don't want to as it causes other problems in the page.

在slickQuiz.js中，尽我所能做到最好的标记代码是

The code that does this markup as best as I can tell is in 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")再次位于径向按钮旁边?

Can you please tell me what needs to change, so the each answer option, i.e. "1", "2", and "3", once again stays adjacent to the radial button?

我正在Eclipse中本地运行它.将其放入FireFox时，会看到以下内容:

I'm running this locally in eclipse. Here's what I see when I put it in 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>

推荐答案

是jQuery Mobile包含的css更改了测验显示.因此，在发行版slickQuiz.js文件中，我将样式强制为内联，如下所示:

It was the css included from jQuery Mobile that altered the quiz display. So in the distribution slickQuiz.js file, I forced the style to be inline as follows:

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

这篇关于jQuery:为什么内容在下一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！