根据按钮的ID数据隐藏类元素

Question

HTML

<a class="us-btn-style_6" id="post-102" href="#">Real Estate</span></a>
<article class="w-grid-item post-102" data-id="102"></article>

jQuery 函数

$('.w-grid-item').hide();
var class1 = ".";
var post_class = "";
$('.us-btn-style_6').click(function(){
    post_class = $(this).data('id')
    post_class = class1 + post_class
    $(post_class).show();
});

有 7 个按钮，对应 7 个<articles>。按钮的ID 与文章的class 具有相同的数据。需要发生什么，当单击按钮时，<article> 需要简单地显示出来。在 jQuery 中我尝试用 ID 数据来显示相应的类。出了什么问题？

Answer 1

使用.data方法时，应该有一个对应的data-前缀属性，本例为data-id：

<a class="us-btn-style_6" data-id="post-102" href="#">Real Estate</a>

这是一个有效的 sn-p：

$('.w-grid-item').hide();
var class1 = ".";
var post_class = "";
$('.us-btn-style_6').click(function(){
    post_class = $(this).data('id')
    post_class = class1 + post_class
    $(post_class).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="us-btn-style_6" data-id="post-102" href="#">Real Estate</a>
<article class="w-grid-item post-102">
Test
</article>

Answer 2

您将 data-id 放入了错误的元素。它需要在您单击的项目上，而不是您要显示的元素上。

我会这样清理它：

$("[data-toggles]").on("click", function (evt) {
  evt.preventDefault();
  var selector = $(this).data("toggles");
  $(".post").hide();
  $(selector).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="us-btn-style_6" data-toggles=".post-102" href="#">Real Estate</span></a>
<a class="us-btn-style_6" data-toggles=".post-103" href="#">Foo Estate</span></a>


<article class="w-grid-item post post-102">X</article>
<article class="w-grid-item post post-103">Y1</article>
<article class="w-grid-item post post-103">Y2</article>