单击时滚动到并显示 div - jquery [关闭]

Question

我可以做到上面提到的，但由于我是 jquery 的新手，我想知道是否有人可以向我展示一个“更有效”的解决方案。

基本上，当单击单选时，它会显示并滚动到一个 div。

$("input:radio[name='one']").click(function() {      
  $('table.one').fadeIn(800); 
  $('html, body').animate({scrollTop:$('table.one').position().top}, 'slow');
});

$("input:radio[name='two']").click(function() {      
  $('table.two').fadeIn(800); 
  $('html, body').animate({scrollTop:$('table.two').position().top}, 'slow');
});

$("input:radio[name='three']").click(function() {      
  $('table.three').fadeIn(800); 
  $('html, body').animate({scrollTop:$('table.three').position().top}, 'slow');
});

<table class="one" style="display: none;"> ...

我已使用相同的脚本 3 次，编写此脚本的最佳方式是什么？ 非常感谢:-)

Answer 1

你可以通过给它一个数据属性，例如<input type='radio' data-table='one' /> 来从被点击的输入中获取目标表，从而使代码更干燥

$("input:radio").click(function() {   
  var table = 'table.' + $(this).attr('data-table');   
  $('' + table).fadeIn(800); 
  $('html, body').animate({scrollTop:$('' + table).position().top}, 'slow');
});

不过，您可以通过其他几种方式从输入中获取表格，例如类。