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上的一个点击处理程序，并获得您点击的范围的data-type。您可以使用它来过滤其他容器元素的类。

第二件事是你可以同时将处理程序附加到多个元素。因此，在您的示例中，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的命名惯例，并在bla-container中遵循sort-container的命名惯例，您就不必担心其他标签的编码问题。

可能仍有一些事情可以进一步优化，但至少它会照顾重复。

如何使此选项卡控制器代码更清晰，更简单？

1 个答案:

结果