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

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数据来显示对应的class。出了什么问题？

Answer 1

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

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

这是一个工作片段：

$('.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>

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

Hide class element based on ID data of button

javascript

jquery

show-hide