显示多个div

时间:2018-09-27 12:36:58

标签: javascript php jquery html codeigniter

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

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

谢谢!

1 个答案:

答案 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>