Показать div с идентификатором, который соответствует атрибуту данных

Question

Я хочу отобразить div с идентификаторами, которые соответствуют атрибуту данных выбранного элемента списка. Ниже приведен код, я думаю, что я почти там, мне просто нужно получить конкретное значение c атрибута данных. Я буду продолжать пытаться, но некоторая помощь будет отличной :)

.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 класс, а затем обработать 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 от элемента, по которому щелкнули, и показать div, идентификатор которого соответствует этому data-target, скрывая при этом остальные элементы

Так что это, вероятно, то, что вам нужно

.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');
        });
    };