Question

对于长代码很抱歉，但是我想压缩这段代码给出相同的输出，或者是否有其他方法来编码并获得相同的输出。

我从PHP获得响应，通过AJAX将其传递给Javascript。

这是响应：

{"questions":{"1":"what1","2":"what2","3":"what3","4":"what4"},"option1":{"1":"A1","2":"A2","3":"A3","4":"A4"},"option2":{"1":"B1","2":"B2","3":"B3","4":"B4"},"option3":{"1":"C1","2":"C2","3":"C3","4":"C4"},"option4":{"1":"D1","2":"D2","3":"D3","4":"D4"},"correct":{"1":"1","2":"2","3":"3","4":"4"}}

现在，当用户单击id = 1的按钮时，应显示索引为1的数组中的所有值，当用户单击id = 2的按钮时，应显示索引为2的数组中的所有值，依此类推

有没有更好的方法来获得具有不同逻辑的相同输出？如果不是，我该如何压缩此代码？

请帮助在此先感谢:)

$.ajax({
url: "index.php",
type: "POST",
dataType: "json",
success: On_success,
error: On_error
});

function On_success(response){

 for (var x = 1; x <= 4; x++){

     $("#que" + x).html(response.questions[x]);

     for (var y = 1; y <= 4; y++) {
       $("#op" + x + y).html(response["option" + y][x]);
   }

    //$("#cor" + x).html(response.correct[x]);
  }

}
function On_error(data){
    console.log(data);
}

function click(){

 $(document).ready(function(){
    $("#pag" + this.dataset.section).show();
 });

}

$(document).ready(function(){

 $("#pag2").hide();
 $("#pag3").hide();
 $("#pag4").hide();

 $("#1").click(click); 
 $("#2").click(click); 
 $("#3").click(click); 
 $("#4").click(click);
}); 

<body>

<div id="pag1">
<p id="que1"></p>
<p id="op11"></p>
<p id="op12"></p>
<p id="op13"></p>
<p id="op14"></p>
<p id="cor1"></p>
</div>

<div id="pag2">
<p id="que2"></p>
<p id="op21"></p>
<p id="op22"></p>
<p id="op23"></p>
<p id="op24"></p>
<p id="cor2"></p>
</div>

<div id="pag3">
<p id="que3"></p>
<p id="op31"></p>
<p id="op32"></p>
<p id="op33"></p>
<p id="op34"></p>
<p id="cor3"></p>
</div>

<div id="pag4">
<p id="que4"></p>
<p id="op41"></p>
<p id="op42"></p>
<p id="op43"></p>
<p id="op44"></p>
<p id="cor4"></p>
</div>

<ul class="pagination">
 <li><button id="1" data-section="1">1</button></li>
 <li><button id="2" data-section="2">2</button></li>
 <li><button id="3" data-section="3">3</button></li>
  <li><button id="4" data-section="4">4</button></li>
</ul>

</body>

Answer 1

您可以使用循环来注入HTML：

<div class="wrapper">
  <header class="header">
    <strong>Header:</strong>Header
  </header>
  <div class="middle">
    <div class="container">
      <main class="content">
        <strong>Content:</strong>Content
      </main>
    </div>
    <aside class="right-sidebar">
      <strong>Right Sidebar:</strong>Right sidebar
    </aside>
  </div>
</div>
<footer class="footer">
  <strong>Footer:</strong>Footer
</footer>

一个更通用的点击处理程序，每个按钮都有一个调整：

for (var x = 1; x <= 4; x++) {
  $("#que" + x).html(response.questions[x]);
  for (var y = 1; y <= 4; y++) {
    $("#op" + x + y).html(response["option" + y][x]);
  }
  $("#cor" + x).html(response.correct[x]);
}

Answer 2

您可以使用以下public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Do something } }处理程序。这至少提高了处理程序的可读性和可扩展性。

onSuccess

如何在HTML页面上显示ajax响应？

2 个答案: