javascript - 具有 HTML 文本更改的多个 SlideToggle Div

Question

基本上我有以下 JS，但想知道如何更有效地完成它，我似乎让事情变得过于复杂。我觉得我可以重用这些功能之一；

    $('.hide').hide(); //hides all the hide links on page load

 $('a.show').each(function() { //running iterator function
 var thisLink = $(this);
 $(this).click(function() { // Checks if any show link is clicked
 show(thisLink) // Calling the show function & passing the selector value
 });
 });

$('a.hide').each(function() { //running iterator function
 var thisLink = $(this);
 $(this).click(function() { // Checks if any hide link is clicked
 hide(thisLink) // Calling the hide function & passing the selector value
 });
 });

 });

function show(btn) {
btn.hide(); //hides the element where click was received
btn.next().show(); //displays the next element that in our case is hide link
btn.next().next().slideToggle('slow'); //toggles the next of next element that is details div
 }

function hide(btn) {
btn.hide(); //hides the element where click was received
btn.prev().show(); //displays the previous element that in our case is show link
btn.next().slideToggle('slow'); //again toggles the next element that is details div to hide it
 }

Answer 1

尝试，

 $('.hide').hide(); //hides all the hide links on page load

 $('a.show').click(show);

 $('a.hide').click(hide);

function show() {
  $(this).hide().next().show().next().slideToggle('slow'); 
}

function hide() {
  $(this).hide().prev().show();
  $(this).next().slideToggle('slow');
}