javascript - JQuery - 如何在桌面和移动菜单之间传递事件类？

Question

我有一个选项卡菜单，可以按类别显示/隐藏博客文章。在我的应用程序的移动版本上，我有一个选择下拉菜单而不是选项卡菜单。我的问题是，当我点击一个选项卡时，假设“自然”，该选项卡获得“事件”类 - 现在，当我切换到移动版本时，“自然”选项卡当然不是“事件” - 如何才能我解决了这个问题吗？

这是我的 JS 代码:

选项卡菜单:

var $btns = $(".tab").on("click", function(e) {
    let clickedTab = $(e.currentTarget).attr("data-tab-id");
    if (clickedTab == "all") {
        $(".blog-posts > div").fadeIn(450);
    } else {
        var $el = $("." + clickedTab).fadeIn(450);
        $(".blog-posts > div")
            .not($el)
            .hide();
    }
    $btns.removeClass("active");
    $(this).addClass("active");
});

选择下拉菜单:

$(".blog-tab-select").change(function() {
    var selectedCategory = $(this).val();
    if (selectedCategory == "all") {
        $(".blog-posts > div").fadeIn(450);
    } else {
        $(".blog-posts .card").removeClass("active");
        var $el = $("." + selectedCategory).fadeIn(450);
        $(".blog-posts > div")
            .not($el)
            .hide();
    }
});

更新

这是我的 HTMl 的样子:

<div class="blog-tabs d-none d-md-block">
  <ul>
    <li data-tab-id="all" class="tab all active">All</li>
    @foreach ($blog_categories as $category)
    <li data-tab-id="{{ strtolower($category->name) }}" class="tab {{ strtolower($category->name) }}">{{ $category->name }}</li>
    @endforeach
  </ul>
</div>

<div class="mobile-select d-md-none">
 <select class="custom-select blog-tab-select w-50 float-right" id="blogTabSelect" name="blogTabSelect">
    <option value="all">All</option>
    @foreach ($blog_categories as $category)
    <option data-tab-id="{{ strtolower($category->name) }}" value="{{ strtolower($category->name) }}">{{ $category->name }}</option>
    @endforeach
 </select>
</div>

我需要某种“状态”或“事件处理程序”吗？请帮忙

Answer 1

在没有看到任何 HTML 的情况下，最简单(但不是最好的)就是不重复您的逻辑，而是触发 <select>的'change'事件 - 在选项卡上单击:

const $sel = $('#blogTabSelect');
const $tab = $('[data-tab]');
const $cat = $('[data-cat]');

// Select does all the job

$sel.on("change", function(e) {

  const val = this.value;
  const $tabTarget = $(`[data-tab="${val}"]`);
  const $catTarget = $(`[data-cat="${val}"]`);

  $tab.not($tabTarget).removeClass('active');
  $cat.not($catTarget).removeClass('active');
  
  if(val === 'all') {
     $cat.addClass('active');
  } else {
     $catTarget.addClass('active');
  }
  
  $tabTarget.addClass('active');
});

// LI just triggers SELECT's value and change event

$tab.on('click', function() {
  $sel.val($(this).data('tab')).trigger('change');
});

[data-tab] {
  background: transparent;
}
[data-tab].active {
  background: #0bf;
}

[data-cat] {
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
}
[data-cat].active {
  visibility: visible;
  opacity: 1;
}

<div class="blog-tabs d-none d-md-block">
  <ul>
    <li data-tab="all" class="active">All</li>
    <li data-tab="cat">cat</li>
    <li data-tab="dog">dog</li>
  </ul>
</div>

<div class="mobile-select d-md-none">
 <select id="blogTabSelect" class="custom-select blog-tab-select w-50 float-right">
    <option value="all" selected>All</option>
    <option value="cat">cat</option>
    <option value="dog">dog</option>
 </select>
</div>

<div class="blog-posts">
  <div data-cat="cat" class="active">cat 1...</div>
  <div data-cat="dog" class="active">dog...</div>
  <div data-cat="cat" class="active">cat 2...</div>
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>