Question

我正在尝试使用三个“李克特量表”输入创建一个表单。对于所有三个输入字段，可以在三个“李克特量表”输入上分配总共10个点。当此分数等于0时，应启用提交按钮并提交表单。应该更新剩下的点数而不使用ajax重新编写页面，这样用户就会知道剩余的点数。

我还没弄清楚如何做到这一点，但我添加了一些伪代码来解释这个。

public static void main (String[] args) {
    try {
        InstanceList training = InstanceList.load (new File(args[0]));

        int numTopics = args.length > 1 ? Integer.parseInt(args[1]) : 200;

        ParallelTopicModel lda = new ParallelTopicModel (numTopics, 50.0, 0.01);
        lda.printLogLikelihood = true;
        lda.setTopicDisplay(50, 7);
        lda.addInstances(training);

        lda.setNumThreads(Integer.parseInt(args[2]));
        lda.estimate();
        logger.info("printing state");
        lda.printState(new File("state.gz"));
        logger.info("finished printing");

    } catch (Exception e) {
        e.printStackTrace();
    }
}

$(document).ready(function(e) {

  // Initial score/points
  var score = 10;
  document.getElementById("score").innerHTML = score;

  $('input:radio').click(function() {
    e.preventDefault();
    // update score, based on clicked alternative value
    new_score = score - alternative_clicked;
    if new_score < 0:
      var error = "You do not have enoght points left, choose a smaler number";

    document.getElementById("error").innerHTML = error;

    else if new_score === 0:
      // enable submit button

      else :
        // update score with new_score value
  });

  $('input:submit').click(function() {
    e.preventDefault();

    // send to google spreadsheet

  });

});

table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
  background: blue;
}

table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
  background: #fafafa;
}

table.border {
  border-collapse: collapse;
  border-spacing: 0;
}

table.border td,
table.border th {
  border: 1px solid grey;
  padding: 10px;
}

Answer 1

这是一种方法：

（对不起代码段中的错误缩进。似乎有点buggy feature in SO）

我使用eval()所以我不需要写很多if / else语句。

然而 - eval() isn’t evil, just misunderstood。

$(document).ready(function(e) {

  // Initial score/points
  var score = 10;
  var a1 = 0, a2 = 0, a3 = 0;
  
  var inputs = $('input');
  
  inputs.each(function(i) {
  	$(this).on('click', function() {    	
    	var clicked = $(this).closest('tr').get(0).id;
      
      score += eval(clicked)      
      score -= eval(clicked + " = " + $(this).val());
      
  		$("#score").html(score);
      
      if (score == 0 && (a1 != 0 && a2 != 0 && a3 != 0)) {
        $("#submit").prop("disabled", false);
      } else {
        $("#submit").prop("disabled", true);
      }
    })
  })
});

table.striped-columns tbody td:nth-of-type(even),
table.striped-columns th:nth-of-type(even) {
  background: blue;
}

table.striped-columns tbody td:nth-of-type(odd),
table.striped-columns th:nth-of-type(odd) {
  background: #fafafa;
}

table.border {
  border-collapse: collapse;
  border-spacing: 0;
}

table.border td,
table.border th {
  border: 1px solid grey;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="/echo/html/" ajax="true">

  <table class="striped-columns border">
    <thead>
      <tr>
        <th>TEST</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody>
      <tr id="a1">
        <td>Alternativ 1</td>
        <td><input type="radio" value="1" name="alternativ1" /></td>
        <td><input type="radio" value="2" name="alternativ1" /></td>
        <td><input type="radio" value="3" name="alternativ1" /></td>
        <td><input type="radio" value="4" name="alternativ1" /></td>
        <td><input type="radio" value="5" name="alternativ1" /></td>
      </tr>
      <tr id="a2">
        <td>Alternativ 2</td>
        <td><input type="radio" value="1" name="alternativ2" /></td>
        <td><input type="radio" value="2" name="alternativ2" /></td>
        <td><input type="radio" value="3" name="alternativ2" /></td>
        <td><input type="radio" value="4" name="alternativ2" /></td>
        <td><input type="radio" value="5" name="alternativ2" /></td>
      </tr>
      <tr id="a3">
        <td>Alternativ 3</td>
        <td><input type="radio" value="1" name="alternativ3" /></td>
        <td><input type="radio" value="2" name="alternativ3" /></td>
        <td><input type="radio" value="3" name="alternativ3" /></td>
        <td><input type="radio" value="4" name="alternativ3" /></td>
        <td><input type="radio" value="5" name="alternativ3" /></td>
      </tr>
    </tbody>
  </table>
  <br>
  <input id="submit" type="submit" value="Submit" disabled/>
  <div id="score">  10
  </div>

</form>

Ajax updatet从输入值得分

1 个答案: