Блог

В принципе, у меня есть следующий 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 amp; 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 amp; 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
 }
  

Попробуйте,

  $('.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');
}
  

сделайте так

  $('.hide').hide(); //hides all the hide links on page load
 $('a.show').click(show);//running iterator function
 $('a.hide').click(hide);

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

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