显示多个 div

Question

所以，我正在做一个项目，它在数据库中有 2 个相关的表！

我需要通过 JavaScript 隐藏并显示包含正确信息的div。

我得到了一个主要产品石头，每个石头都有 2 种其他石头类型

因此，如果我单击具有 Stone1 的 img，我想显示 Stone1.1、Stone1.2等并隐藏所有其他StoneType。

这就是我现在在JS上得到的

jQuery('.Pedras').click(function(){
jQuery('.SubPedras').hide();
jQuery('#div'+$(this).attr('target')).show();
});

这里的问题是我只显示第一个div，即使我有 2 个具有相同名称示例的div：

<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">

而 {IdPedra} 是数据库中石头的 id，所以我会得到"div1"两到三次，依此类推。

任何人都可以帮助我，我无法找到适合我需求的解决方案。

谢谢！

Answer 1

您可以使用数据属性来实现此目的。在您更改我的代码中;

<div data-id="{IdPedra}" class="SubPedras">Stone 1.1</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 1.2</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 2.1</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 2.2</div>

您可以使用 $(element(.data("name"( 访问元素的数据属性;这等效于 data-name。我还存储了佩德拉斯

遍历 SubPedras，并检查它们是否与您希望用作过滤器的父类别或值所在的按钮匹配。运行代码段，谢谢！

(您也可以将它们存储到类属性而不是数据中(

jQuery('.Pedras').click(function() {
// store button value to variable
var pedraValue = $(this).val();

// loop through the SubPedras
$(".SubPedras").each(function() {

// get the value from data attribute
if ($(this).data("id") == pedraValue) {

// if match show
$(this).show();
}
else{
// else hide
$(this).hide();
}
});
});

.SubPedras{
line-height:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="Stone1" class="SubPedras">Stone 1.1</div>
<div data-id="Stone1" class="SubPedras">Stone 1.2</div>
<div data-id="Stone2" class="SubPedras">Stone 2.1</div>
<div data-id="Stone2" class="SubPedras">Stone 2.2</div>
<button class="Pedras" value="Stone1">Stone 1</button>
<button class="Pedras" value="Stone2">Stone 2</button>