滚动到并在点击时显示 div - jquery

Question

我可以做到上面提到的，但由于我是 jquery 的新手，我想知道是否有人可以向我展示 'more efficient' 解决问题的方法。

基本上，单击收音机时，它会显示并滚动到 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;"> ...

我已经使用同一个脚本三次，最好的脚本编写方式是什么？非常感谢:-)

Answer 1

您可以通过从被点击的输入中获取目标 table 来使代码变干，方法是给它一个数据属性，例如 <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');
});

还有其他几种方法可以从输入中获取 table，例如 class。

滚动到并在点击时显示 div - jquery

scroll to and reveal div on click - jquery

javascript

css

jquery

scroll

show-hide