缩短JavaScript函数事件

Shorten JavaScript function events

本文关键字：事件 函数 JavaScript 缩短      更新时间：2023-09-26

我有一个页面如下：

<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
  var i = 1;
$('#prev').click(function() {
  $.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=' + i,
  dataType: 'json',
  cache: false,
  success: function(result) {
    $('#content1').html(result[0]);
    $('#content2').html(result[1]);
    $('#content3').html(result[2]);
    $('#content4').html(result[3]);
    $('#content5').html(result[4]);
    $('#content6').html(result[5]);
  },
  });
  i++;
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="prev">prev</td>
<td id="content1">X</td>
<td id="content2">X</td>
<td id="content3">X</td>
<td id="content4">X</td>
<td id="content5">X</td>
<td id="content6">X</td>
<td id="next">next</td>
</tr>
</table>
</body>

代码运行良好，但有什么解决方案可以一步到位吗？我的意思是，如果我可以为内容1-6提供一个公共类content，而不是特定的id。如果内容单元格没有特定的ID（从content1到content6，并且有一个公共类content），我该怎么做？

查看.ech（）迭代器

$('.content').each(function(index){
     $(this).html(result[index]);
});

您可以在您的情况下使用这个：

success: function(result) {
    for(var i=0; i < 6; i++)
    {
      $('#content' + (i + 1)).html(result[i]);
    }
  }

但是，如果#contentdiv没有可使用的标识符，则必须依次设置每个标识符。

如果您可以在一个调用中获得所有contentdiv，那么您也可以使用jQuery each迭代器：

$('div .content').each(function(ind)
{
  $(this).html(result[ind]);
});

假设result没有其他功能，您也可以执行：

success: function(result) {
    $.each(result,function(i,e){
      $('#content' + (i + 1)).html(e);
    });
  }
相关文章：