我該如何使這個Tab控制器代碼更簡潔一些？

Question

我將如何簡化此jquery代碼。 我覺得我在重復自己，只是想知道是否有較短的書寫方式，我敢肯定。 我對javascript和jquery有點陌生。 我創建了兩個選項卡，它們帶有自己的容器，其中包含其他信息。 基本上，我希望在單擊“容器”的“相關”選項卡時將其打開。 我也希望該標簽處於活動狀態時突出顯示。 此外，當您從標簽容器中單擊時，如何編寫代碼使所有標簽容器消失。

<!-- HTML Code -->
<div class="sort-filters">
  <span class="sort-by active">SORT BY</span>
  <span class="filter">FILTER</span>
</div>

<div class="sort-containers">
  <div class="sort-by-container">Sort by click me here</div>
  <div class="filter-container">Filter click me here</div>
</div>

/* CSS */
.sort-filters {
  display: flex;
  width: 500px;
  height: 30px;
}

.sort-by,
.filter {
  background: #CCC;
  color: #756661;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
  cursor: pointer;
}

.sort-by-container,
.filter-container {
  width: 500px;
  background: #756661;
  color: #FFF;
  height: 100px;
  display: none;
}

.active {
  background: #756661;
  color: #FFF;
  transition: 0.2s;
}

// Jquery Code
js = $.noConflict();
var sort = js('.sort-by');
var filter = js('.filter');
var sortContainer = js('.sort-by-container');
var filterContainer = js('.filter-container');

js(sort).click(function() {
  js(filterContainer).hide();
  js(sortContainer).show();
  js(sort).addClass('active');
  js(filter).removeClass('active');
});

js(filter).click(function() {
  js(sortContainer).hide();
  js(filterContainer).show();
  js(filter).addClass('active');
  js(sort).removeClass('active');
});

Answer 1

為了避免此類重復操作，我喜歡遵循命名約定，以便可以將一個元素的ID，類或屬性應用於其他元素，例如：

<div id="tabs">
  <span class="active" data-type="sort-by">SORT BY</span>
  <span data-type="filter">FILTER</span>
</div>

現在，您只需要在#tabs span上單擊處理程序，即可獲得單擊的#tabs span的data-type 。 您可以使用它來過濾其他容器元素的類。

第二件事是您可以同時將處理程序附加到1個以上的元素。 因此，在您的示例中， js('#sort-containers div').hide(); 會一次隱藏所有與選擇器匹配的div 。

結果

我將某些類更改為ID，將某些類更改為數據屬性。 這是一個小提琴： https : //jsfiddle.net/mq9xk29y/

HTML：

<div id="tabs">
  <span data-type="sort-by">SORT BY</span>
  <span data-type="filter">FILTER</span>
</div>

<div id="sort-containers">
  <div class="sort-by-container">Sort by click me here</div>
  <div class="filter-container">Filter click me here</div>
</div>

JS：

js = $.noConflict();
var $tabs = js('#tabs span');
$tabs.click(function() {
  var $clicked = js(this); //get the element thats clicked on
  var type = $clicked.data('type'); //get the data-type value

  $tabs.removeClass('active'); //remove active from all tabs
  $clicked.addClass('active'); //add active to the current tab
  js('#sort-containers div').hide(); //hide all containers
  js('.' + type + '-container').show().addClass('active'); //add active to current container
});

只要遵循data-type: bla的命名約定data-type: bla選項卡中的bla-container以及sort-container的類的bla-container sort-container ，您就不必擔心為其他選項卡編碼。

可能仍有一些事情可以進一步優化，但至少它將處理重復問題。