有很多重复的HTML

时间:2017-11-08 16:26:43

标签: javascript jquery html

我正在编写一个代码来查看“证据说明”,但是在问题45之前必须执行此代码,不能简化?,请记住h4的名称和数据应该线性上升? / p>

            <div class="radio">
            <h4> questao 1</h4>
                <label class="radio-inline"><input type="radio" name="Q1" value="A"> A <br></label>
                <label class="radio-inline"><input type="radio" name="Q1" value="B"> B <br></label>
                <label class="radio-inline"><input type="radio" name="Q1" value="C"> C <br></label>
                <label class="radio-inline"><input type="radio" name="Q1" value="D"> D <br></label>
                <label class="radio-inline"><input type="radio" name="Q1" value="E"> E <br></label>
            </div>
            <hr />
            <div class="radio">
                <h4> questao 2</h4>
                <label class="radio-inline"><input type="radio" name="Q2" value="A"> A <br></label>
                <label class="radio-inline"><input type="radio" name="Q2" value="B"> B <br></label>
                <label class="radio-inline"><input type="radio" name="Q2" value="C"> C <br></label>
                <label class="radio-inline"><input type="radio" name="Q2" value="D"> D <br></label>
                <label class="radio-inline"><input type="radio" name="Q2" value="E"> E <br></label>
                <hr />
            </div>
            <div class="radio">
                <h4> questao 3</h4>
                <label class="radio-inline"><input type="radio" name="Q3" value="A"> A <br></label>
                <label class="radio-inline"><input type="radio" name="Q3" value="B"> B <br></label>
                <label class="radio-inline"><input type="radio" name="Q3" value="C"> C <br></label>
                <label class="radio-inline"><input type="radio" name="Q3" value="D"> D <br></label>
                <label class="radio-inline"><input type="radio" name="Q3" value="E"> E <br></label>
                <hr />
            </div>
            <div class="radio">
                <h4> questao 4</h4>
                <label class="radio-inline"><input type="radio" name="Q4" value="A"> A <br></label>
                <label class="radio-inline"><input type="radio" name="Q4" value="B"> B <br></label>
                <label class="radio-inline"><input type="radio" name="Q4" value="C"> C <br></label>
                <label class="radio-inline"><input type="radio" name="Q4" value="D"> D <br></label>
                <label class="radio-inline"><input type="radio" name="Q4" value="E"> E <br></label>
                <hr />
            </div>
            <div class="radio">
                <h4> questao 5</h4>
                <label class="radio-inline"><input type="radio" name="Q5" value="A"> A <br></label>
                <label class="radio-inline"><input type="radio" name="Q5" value="B"> B <br></label>
                <label class="radio-inline"><input type="radio" name="Q5" value="C"> C <br></label>
                <label class="radio-inline"><input type="radio" name="Q5" value="D"> D <br></label>
                <label class="radio-inline"><input type="radio" name="Q5" value="E"> E <br></label>
                <hr />
            </div>

直到第45个问题

2 个答案:

答案 0 :(得分:1)

嵌套for循环可以很容易地解决这个问题。

&#13;
&#13;
var numbersToLetters = ["A", "B", "C", "D", "E"];

//first for loop to generate question number
for (i = 1; i <= 45; i++) {
  $("#container").append("<div class='radio' id='" + i + "'></div><hr/>");
  $("div #" + i + "").append("<h4> questao " + i + "</h4>");

  //second for loop to generate possible answers
  for (j = 0; j < 5; j++) {
    $("div #" + i + "").append("<label class='radio-inline'><input type='radio' name='Q" + i + "' value='" + numbersToLetters[j] + "'/>" + numbersToLetters[j] + "</label><br/>");
  }

  //set first item of each radio group to checked by default
  $("input[name='Q" + i + "']").first().prop("checked", true);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

因为这是一个JavaScript问题我的纯解决方案:

document.body.innerHTML = buildContent();

function buildContent(){
  var content ='';
  for (var i = 1; i <= 45; i++) {
    var radio = '<div class="radio">';
    var h4 = '<h4> questao '+i+'</h4>';
    var label ='';
    var char = nextChar('z');
    for( var i2 = 0; i2 <= 4; i2++) {
      var label_s = '<label class="radio-inline">';
      var input = '<input type="radio" name="Q'+i+'" value="'+char+'">';
      var label_e = char+' <br></label>';
      label += label_s+input+label_e;
      char = nextChar(char);
    }
    content += radio+h4+label;
  }
  return content;
}

function nextChar(c) {
  var i = (parseInt(c, 36) + 1 ) % 36;
  return (!i * 10 + i).toString(36).toUpperCase();
}