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

Answer 2

喜欢这个

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

多个SlideToggle Divs与HTML文本更改

2 个答案: