显示具有与数据属性匹配的 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');
        });
    };