所以,我正在一个项目中,该项目在数据库中有2个相关的表!
我需要通过JavaScript隐藏并显示包含正确信息的div。
我有一个主要产品 Stone ,每个 Stone 还有另外2个 Stone Types
因此,如果我单击具有 Stone1 的img,我想显示 Stone1.1 , Stone1.2 ,等等,并隐藏所有其他 StoneTypes 。
这就是我现在在JS上获得的
jQuery('.Pedras').click(function(){
jQuery('.SubPedras').hide();
jQuery('#div'+$(this).attr('target')).show();
});
这里的问题是,即使我有两个具有相同 Name 示例的div,我也只能显示第一个div:
<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">
而{IdPedra}是数据库中石头的ID,因此我将获得“ div1”两次或3次,等等。
有人可以帮助我吗,我找不到适合我需要的解决方案。
谢谢!
答案 0 :(得分:0)
您可以使用数据属性来完成此任务。在您将我的代码更改为;
<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”);访问元素的数据属性。这等效于数据名称。我还存储了Pedras
遍历SubPedras,并检查它们是否与您希望用作过滤器的父类别或值的按钮匹配。运行代码段,谢谢!
(您也可以将它们存储到class属性而不是数据中)
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>