顯示具有與數據屬性匹配的 ID 的 div

Question

我想顯示與所選列表項的數據屬性匹配的 ID 的 div。 下面是代碼，我想我快到了，我只需要獲取數據屬性的特定值。 我會繼續嘗試，但一些幫助會很棒:)

.hide {
  display: none;
}

<ul class="list-filter">
  <li data-target="#example1">Example 1</li>
  <li data-target="#example2">Example 2</li>
</ul>

<div class="hide filtered-content" id="example1">hi</div>
<div class="hide filtered-content" id="example2">hi-2</div>


const filter = function () {
        var $current = $('ul.list-filter li');

        $current.on('click', function() {
            var $dataType = $(this).attr('data-target'),
                $dataContent = $('.filtered-content[id]');

            $('ul.list-filter li').removeClass('active');
            $(this).addClass('active');
            if ($dataContent === $dataType) {
                $dataContent.removeClass('hide');
            } else {
                $dataContent.addClass('hide');
            }
        });
    };

Answer 1

這應該做你需要的。

 $(function(){ var filteredContent = $('.filtered-content div'); $('ul.list-filter li').on('click', function(){ $('ul.list-filter li').removeClass('active'); $(this).addClass('active'); var $dataType = $(this).attr('data-target'); filteredContent.hide(); $($dataType).show(); }); });

 .hide{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-filter"> <li data-target="#example1">Example 1</li> <li data-target="#example2">Example 2</li> </ul> <div class="filtered-content"> <div class="hide" id="example1">hi</div> <div class="hide" id="example2">hi-2</div> </div>

Answer 2

首先，您在class="list-filter 、 data-target="#example1和data-target="#example2處缺少""關閉標簽

其次，您沒有調用filter功能。 它應該是這樣的

$( document ).ready(function() {
    filter();
});

第三， $dataContent = $('.filtered-content[id]'); 是不正確的。 它可能會像這樣修復$dataContent = $(dataType);

最后，您應該添加data-content類，然后像$(".data-content").addClass('hide');一樣處理 jQuery $(".data-content").addClass('hide'); 反而。

 $( document ).ready(function() { filter(); }); const filter = function () { var $current = $('ul.list-filter li'); $current.on('click', function() { var dataType = $(this).attr('data-target'), $dataContent = $(dataType); $('ul.list-filter li').removeClass('active'); $(this).addClass('active'); $(".data-content").addClass('hide'); $dataContent.removeClass('hide'); }); };

 .hide { display: none; } .active{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-filter"> <li data-target="#example1">Example 1</li> <li data-target="#example2">Example 2</li> </ul> <div class="hide data-content" id="example1">hi</div> <div class="hide data-content" id="example2">hi-2</div>

Answer 3

我認為你的意思是從被點擊的元素中獲取data-target並顯示其 id 與該data-target匹配的 div，同時隱藏其余元素

所以這可能是你需要的

.hide {
  display: none;
}

<ul class="list-filter>
  <li data-target="#example1>Example 1</li>
  <li data-target="#example2>Example 2</li>
</ul>

<div class="filtered-content hide" id="example1">hi</div>
<div class="filtered-content hide" id="example2">hi-2</div>


const filter = function () {
        var $current = $('ul.list-filter li');

        $current.on('click', function() {
            var targetId = $(this).attr('data-target'),
                $allContent = $(`div.filtered-content`);
                $dataContent = $(targetId);

            $('ul.list-filter li').removeClass('active');
            $(this).addClass('active');
            $allContent.addClass('hide');
            $dataContent.removeClass('hide');
        });
    };