JS 在條件中使用數據屬性

Question

我有一個引導模式，用戶可以選擇 3 個選項。 如果他們選擇第三個選項（按服務搜索），它會將您帶到一個包含服務選項列表的新面板 (#service-box)。 我正在嘗試添加功能，以便當用戶單擊一次服務時，它會顯示 #service-options 面板以及提供該服務的位置。

我現在硬編碼以在 #service-options 面板上顯示所有三個位置，但我試圖找出一種方法，我可以為每個服務添加一個屬性，以便在單擊時將它們帶到 #service-options帶有僅用於具有該屬性的位置的按鈕的面板。

這是迄今為止我所擁有的代碼筆...... https://codepen.io/aaron4osu/pen/poyKvjQ?editors=1010

這是兩個面板

        <div id="service-box" class="service-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>
            
            <div class="row">
                <div class="col-xs-6 uc">
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 3" href="#">Service 1</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 2</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 3</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 4</a></p>
                    
                </div>

                <div class="col-xs-6">
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 3" href="#">Service 5</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 2, Location 3" href="#">Service 6</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2, Location 3" href="#">Service 7</a></p>
                    <p><a class="service btn btn-lg btn-outline-dark btn-block btn-toggle" data-destination="#service-options" data-locations="Location 1,Location 2" href="#">Service 8</a></p>
                </div>
            </div>
             
            <p class="close sidebar Close"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close service-box -->

        <div id="service-options" class="service-box toggleSearch" style="display: none;">

            <div class="row mb20">
                <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>
            </div>
            
            <div class="row">
                <div class="col-xs-12 uc">
                    <p><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 1</a></p>
                    <p><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 2</a></p>
                    <p><a class="btn btn-lg btn-outline-dark btn-block" href="">Location 3</a></p>
                </div>
            </div>
             
            <p class="close sidebarClose"> Back <i class="fas fa-angle-right"></i></p>

        </div><!-- close service-box -->
        $(document).ready(function () {
          $(".btn-toggle").click(function () {
            //var destination = $(this).attr("href");
            var destination = $(this).data("destination");
            $(".search-box").slideUp("slow");
            $(destination).slideDown("slow");
          });

          $(".close").click(function () {
            $(".search-box").slideDown("slow");
            $(".toggleSearch").slideUp("slow");
          });
        });

任何幫助將不勝感激。

Answer 1

根據您的要求，您可以定義在單擊服務按鈕時捕獲的事件。

您將從那里獲得值： $(this).data('locations') 。

由於您有多個位置，您可以按,字符分割它們並剪切前面的空白區域。

最后，在service-options模式中，您選擇所有位置按鈕並根據里面的文本過濾它們。 您首先隱藏所有這些，然后在過濾后顯示匹配的位置。

$('.service.btn-toggle').click(function () {  
    var locations = $(this).data('locations').split(',').map(function (location) {
      return location.trim();
    });

    $('#service-options .btn-block').hide().filter(function () {
       return locations.indexOf($(this).text().trim()) > -1;
    }).show();
});