重構jQuery重複模式

爲了快速構建原型，我已將自己繪製到一個角落。重構以下jQuery代碼的最佳方式是什麼？其功能是在一些側欄導航項目之間切換。爲了可擴展性，我需要它更加動態。重構jQuery重複模式

您是否將if語句中的ID添加到數組中並遍歷它們？使用變量？創建一個函數並在html端onClick上調用它？不管我怎麼想，它都會導致一堆重複的代碼。

謝謝！

// TOGGLING LEFT NAVIGATION 
 
    $('#settingsClick').click(function() { 
 
     if($('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible')) { 
 
     $('#addContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#settingsContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#settingsContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#addClick').click(function() { 
 
     if($('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#addContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#addContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#noteClick').click(function() { 
 
     if($('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#addContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#noteContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#noteContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#logoClick').click(function() { 
 
     if($('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#addContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#logoContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#themeClick').click(function() { 
 
     if($('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#addContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#themeContainer').slideDown(350); 
 
     } else { 
 
     $('#themeContainer').slideToggle(350); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="settingsClick">Click Me</a><br> 
 
<div id="settingsContainer">Content...</div> 
 

 
<br><br> 
 

 
<a id="addClick">Click Me</a><br> 
 
<div id="addContainer">Content...</div> 
 

 
<br><br> 
 

 
<p> Etc... Etc....</p>

來源

2017-02-18 Sergio

Satpal，你打我吧。現在，示例html已經啓動。 – Sergio

是的我可以訪問html代碼 – Sergio

你應該使用普通CSS類組

，即header和content。使用建立的關係，您可以將其他內容持有者和與當前點擊的標題元素相關聯的內容作爲目標。

$('.container .header').on('click', function() { 
 
    //Get the current element 
 
    var $this = $(this); 
 

 
    //find the content 
 
    var $content = $this.closest('.container').find('.content'); //$this.next() 
 

 
    //get all contents 
 
    var content = $('.container .content'); 
 

 
    //Slide up others 
 
    content.not($content).slideUp(350); 
 

 
    //Slide down 
 
    $content.slideToggle(350); 
 
});

.content { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="header" id="settingsClick">Click Me</div> 
 
    <div class="content" id="settingsContainer">Content...</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="header" id="addClick">Click Me</div> 
 
    <div class="content" id="addContainer">Content...</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="header" id="noteClick">Click Me</div> 
 
    <div class="content" id="noteContainer">Content...</div> 
 
</div>

來源

2017-02-18 09:43:51 Satpal

太棒了。謝謝你的Satpal！ – Sergio

最好的辦法是做它像這樣

$(document).on('click', ".trigger", function() { 
 
    var sibling_content = $(this).siblings(".content"); 
 
    if (!sibling_content.hasClass('active')) { 
 
    $(".content").slideUp('slow').removeClass('active'); 
 
    sibling_content.slideDown('slow').addClass('active'); 
 
    } else { 
 
    sibling_content.slideUp('slow').removeClass('active'); 
 
    } 
 
})

.trigger { 
 
    background-color: red; 
 
    color: white; 
 
    font-size: 16px; 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 20px 0; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div>

來源

2017-02-18 09:50:30

這看起來不錯的不朽Dude。謝謝。 – Sergio

重構jQuery重複模式

回答

相關問題