根据其属性值显示/隐藏多个div [英] Show/hide multiple divs based on a value in their attribute

问题描述

我问这个问题较早，但我想也许我措辞不当，而且我得到的答案是如何显示/隐藏在一个点击按钮的一组div的。我明白怎么可以做到的。但是我的问题是有点不同。我想发布一个更精细，更详细的问题，这个时候：

我有一堆的div，显示图像

 ＆LT; D​​IV NG控制器='PhotoController'＆GT;
  ＆LT;按钮和gt;显示ALL＆LT; /按钮＆GT;
  ＆LT;按钮和gt;显示过滤器＆LT; /按钮＆GT;
  ＆LT; D​​IV NG重复=照片照片NG秀='isShowImage级=形象容器'＆GT;
     ＆LT; IMG NG-SRC ='{{photo.src}}数据显示='{{photo.filtered}}'＆GT;
     ＆LT; BR /＆GT;
 ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

为的值{{} photo.filtered} 来自数据库，将是一个整数。我想的是，当显示已筛选按钮被点击，只有一流的格作图像容器应显示它有它里面的图像为其数据显示由于将非零。

在单击显示全部，所有的照片将不考虑进行显示数据显示值。

我知道，如果我添加 NG-秀= {{} photo.filtered} 到图像容器 DIV那么我可以只显示具有数据显示为非零的图像。但是我不知道怎么被点击SHOW ALL时，更改此标准。

任何有识之士为AP preciated。

解决方案

如果这个答案没有帮助，请解释为什么在注释中。
我加入了更多图像容器 div的帮助模拟整个事情进行测试和部署。此外，对于收集图像容器的原因每个按钮被点击时是这样，如果你经常使用AJAX更新的div，没有将从列表时失踪程序运行。因为你永远不指定，并将该软件的性质很可能使用AJAX，我采取了必要的precautions。让我知道如果有什么我可以做的。

要设置自定义的JavaScript属性。使用这些功能...
elem.getAttribute（'ATTR名'）; //获取属性值
elem.setAttribute（'ATTR名'，'ATTR值'）; //设置属性值

\r

\r

的window.onload =函数（）{\r
  变种showAllButton =的document.getElementById（'showAllButton'）;\r
  变种showFilteredButton =的document.getElementById（'showFilteredButton'）;\r
  showAllButton.onclick =功能（）{\r
    VAR容器= document.getElementsByClassName（'形象容器'）;\r
    对于（VAR I = 0;！I = containers.length;我++）{\r
      容器[I] .style.display =块;\r
    }\r
  };\r
  showFilteredButton.onclick =功能（）{\r
    VAR容器= document.getElementsByClassName（'形象容器'）;\r
    对于（VAR I = 0;！I = containers.length;我++）{\r
      如果（集装箱[I]。儿童[0] .getAttribute（'数据显示'）大于0）{\r
        容器[I] .style.display =块;\r
      }其他{\r
        容器[I] .style.display =无;\r
      }\r
    }\r
  };\r
};

\r

＆LT; D​​IV NG控制器='PhotoController'＆GT;\r
  ＆LT;按钮ID =showAllButton＆gt;显示ALL＆LT; /按钮＆GT;\r
  ＆LT;按钮ID =showFilteredButton＆gt;显示过滤器＆LT; /按钮＆GT;\r
  ＆LT; D​​IV NG重复=照片照片NG秀='isShowImage级=形象容器'＆GT;\r
    ＆LT; IMG NG-SRC ='{{photo.src}}数据显示='14'＆GT;测试\r
    ＆LT; BR /＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT; D​​IV NG重复=照片照片NG秀='isShowImage级=形象容器'＆GT;\r
    ＆LT; IMG NG-SRC ='{{photo.src}}数据显示=5＆GT;测试\r
    ＆LT; BR /＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT; D​​IV NG重复=照片照片NG秀='isShowImage级=形象容器'＆GT;\r
    ＆LT; IMG NG-SRC ='{{photo.src}}数据显示='0'＆GT;测试\r
    ＆LT; BR /＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I asked this question earlier, but I think perhaps I worded it incorrectly and the answers that I got was how to show/hide a set of divs upon the click of a button. I understand how that can be done. However my problem is a bit different. I am trying to post a more elaborate and detailed question this time:

I have a bunch of divs that show images

<div ng-controller='PhotoController'>
  <button>SHOW ALL</button>
  <button>SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
     <img ng-src ='{{photo.src}}' data-show='{{photo.filtered}}'>
     <br/>
 </div>
</div>

The value for {{photo.filtered}} comes from database and will be an integer. What I want is that when SHOW FILTERED button is clicked, only those divs with class as image-containers should be shown which has an image inside it for which the data-show attributed will be non-zero.

Upon clicking SHOW ALL, all the photos will be shown irrespective of data-showvalue.

I know that if I add ng-show={{photo.filtered}} to the image-container div then I can show only the images which have data-show as non-zero. However I do not know how to change this criteria when SHOW ALL is clicked.

Any insight is appreciated.

解决方案

If this answer doesn't help, please explain why as a comment. I have added several more image-container divs to help simulate the entire thing for testing and deployment. Also, the reason for gathering the image-container each time the button is clicked is so that if you are updating the divs frequently with AJAX that none will be missing from the list when the program runs. Since you never specified and the nature of this program seems likely to use AJAX, I took the necessary precautions. Let me know if there is anything else I can do.

To set custom attributes with JavaScript. Use these functions... elem.getAttribute('attr-name');//get the attribute value elem.setAttribute('attr-name','attr-value');//set an attribute value

window.onload = function() {
  var showAllButton = document.getElementById('showAllButton');
  var showFilteredButton = document.getElementById('showFilteredButton');
  showAllButton.onclick = function() {
    var containers = document.getElementsByClassName('image-container');
    for (var i = 0; i != containers.length; i++) {
      containers[i].style.display = 'block';
    }
  };
  showFilteredButton.onclick = function() {
    var containers = document.getElementsByClassName('image-container');
    for (var i = 0; i != containers.length; i++) {
      if (containers[i].children[0].getAttribute('data-show') > 0) {
        containers[i].style.display = 'block';
      } else {
        containers[i].style.display = 'none';
      }
    }
  };
};

<div ng-controller='PhotoController'>
  <button id="showAllButton">SHOW ALL</button>
  <button id="showFilteredButton">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='14'>testing
    <br/>
  </div>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='5'>testing
    <br/>
  </div>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='0'>testing
    <br/>
  </div>
</div>

这篇关于根据其属性值显示/隐藏多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！