Question

所以，我正在一个项目中，该项目在数据库中有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次，等等。

有人可以帮助我吗，我找不到适合我需要的解决方案。

谢谢！

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”）;访问元素的数据属性。这等效于数据名称。我还存储了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>

显示多个div

1 个答案: