隐藏基于Data atributte JQuery的元素

时间:2016-01-05 01:29:31

标签: javascript php jquery html5 instagram-api

我正在尝试编写一个基本的PHP脚本,它将获取我自己的Instagram照片,并根据我添加的标签显示我想要的那些。

到目前为止,基于一些教程和我自学成才的PHP和JS,我提出了这个:

<html>
<head>
        <script src="assets/js/jquery.min.js"></script>
</head>
<?php

    <html>
    <head>
            <script src="assets/js/jquery.min.js"></script>
    </head>
    <?php

      function fetchData($url){
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_URL, $url);
      function fetchData($url){
      function fetchData($url){
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
      curl_setopt($ch, CURLOPT_TIMEOUT, 20);
      $result = curl_exec($ch);
      curl_close($ch);
      return $result;
      }

      $result = fetchData("https://api.instagram.com/v1/users/1013397/media/recent/?access_token=1013397.ab103e5.5061b21c8fb0436bb20d881d46f9ae5c&count=14");


      $result = json_decode($result);
      foreach ($result->data as $post) {
         if(empty($post->caption->text)) {
           // Do Nothing
         }
         else {
            echo '
            <div data-tag="'.$post->caption->text.'">
                    <a class="instagram-unit" target="blank" href="'.$post->link.'">
                            <img data-tag="'.$post->caption->text.'" class="gallery-item" src="'.$post->images->standard_resolution->url.'" alt="'.$post->caption->text.'" width="100%" height="auto" />
                    </a>
            </div>';
         }

      }
    ?>
    <script>
    $(document).ready(function(){
            var permit = '#aruba'
            $('div').each(function(){
            if($('div').attr('data-tag').indexOf(permit) > -1 ){
                    console.log('has tag')
            }
            });
    });
    </script>

我试图隐藏所有没有在JS栏中写入的标签的图像。但到目前为止还没有运气。

我做错了什么?

1 个答案:

答案 0 :(得分:1)

$(document).ready(function(){
    //find all divs, filter out any who do have the matching tag, hide all that don't
    $('div').filter(function(){ return $(this).data('tag') !== "#aruba"; }).hide();
});

谈到你的原始问题,你的问题的一部分是你在div上做了每个(),但是然后你在里面再次查看它们,所以你丢失了你实际评估哪一个可以被访问的上下文用'this'或'$(this)'。

使用数据元素时,请使用数据()并不要使用密钥的“数据 - ”部分。