1 
  (function(){
  var photoTemplate, resource;

  function init(){
    bindEventHandlers();
    photoTemplate = _.template($('#photo-template').html());
  }

  function toTemplate(photo){
    photo = {
      count: photo.likes.count,
      avatar: photo.user.profile_picture,
      photo: photo.images.low_resolution.url,
      url: photo.link
    };

    return photoTemplate(photo);
  }

  function toScreen(photos){
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
                    .fadeIn();

    $.each(photos.data, function(index, photo){
      photos_html += toTemplate(photo);
    });

    $('div#photos-wrap').append(photos_html);
  }

  function generateResource(tag){
    var config = Instagram.Config, url;

    if(typeof tag === 'undefined'){
      throw new Error("Resource requires a tag. Try searching for cats.");
    } else {
      // Make sure tag is a string, trim any trailing/leading whitespace and take only the first 
      // word, if there are multiple.
      tag = String(tag).trim().split(" ")[0];
    }

    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID;

    return function(max_id){
      var next_page;
      if(typeof max_id === 'string' && max_id.trim() !== '') {
        next_page = url + "&max_id=" + max_id;
      }
      return next_page || url;
    };
  }


function paginate(max_id){    
        $.getJSON(generateUrl(tag), toScreen);
      }

      function search(tag){
        resource = generateResource(tag);
        $('.paginate a').hide();
        $('#photos-wrap *').remove();
        fetchPhotos();
      }

      function fetchPhotos(max_id){
        $.getJSON(resource(max_id), toScreen);
      }

      function bindEventHandlers(){
        $('body').on('click', '.paginate a.btn', function(){
          var tagID = $(this).attr('data-max-tag-id');
          fetchPhotos(tagID);
          return false;
        });

        // Bind an event handler to the `submit` event on the form
        $('form').on('submit', function(e){

          // Stop the form from fulfilling its destinty.
          e.preventDefault();

          // Extract the value of the search input text field.
          var tag = $('input.search-tag').val().trim();

          // Invoke `search`, passing `tag` (unless tag is an empty string).
          if(tag) {
            search(tag);
          };

        });

      }

      function showPhoto(p){
        $(p).fadeIn();
      }

      // Public API
      Instagram.App = {
        search: search,
        showPhoto: showPhoto,
        init: init
      };
    }());

    $(function(){
      Instagram.App.init();

      // Start with a search on yogofactory; we all love frozen yogurt :).
      Instagram.App.search('yogofactory');  
    });

次に、HTML ファイルに移動し、これを中心にギャラリーを構築します

<script type="text/template" id="photo-template">
      <div class='photo'>
          <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);' />
        <img class='avatar' width='40' height='40' src='<%= avatar %>' />
        <span class='heart'><strong><%= count %></strong></span>
      </div>
</script>

JS や jQuery に関しては、私は経験がありません。<div class="photo">内部の画像がその画像である場合にのみ、クラスを親に追加する方法を探していsrc="http://image.com/onlythisone.jpg"ます。

Instagram データベースから動的に取得する大きなギャラリーのギャラリーがあります。基本的に、プロモーション用に作成したハッシュ タグ ルールに従わない特定の写真を非表示にできるようにしたいと考えています。

どんな助けでも素晴らしいでしょう！前もって感謝します！

4

2 に答える 2

4 
$(function() {
    $('img[src="http://image.com/onlythisone.jpg"]').parent().addClass('myClass')
});

編集：

function toScreen(photos) {
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
        .fadeIn();

    $.each(photos.data, function (index, photo) {
        photos_html += toTemplate(photo);
    });

    photos_html.find('img[src="http://image.com/onlythisone.jpg"]').remove();

    $('div#photos-wrap').append(photos_html);
}
于 2013-05-17T20:31:52.000 に答える
0

これは、画像の src 値とクラス名に設定された属性で呼び出されると、すべての画像を検索し、指定されたクラスがまだ存在しない場合はその親に追加する JavaScript で記述された関数です。画像を読み込んだ後、関数を実行するだけです。

function addClassToSpecificImageParent(imageUrl, className) {
    Array.prototype.forEach.call(document.getElementsByTagName("img"), function (element) {
        if (element.src === imageUrl && !element.parentNode.classList.contains(className)) {
            element.parentNode.classList.add(className);
        }
    });
}

addClassToSpecificImageParent("http://image.com/onlythisone.jpg", "someClass");

;

jsfiddleについて

更新：投稿したコードに基づいて、以下に示すように、上記の関数への呼び出しを追加します

function toScreen(photos) {
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
        .fadeIn();

    $.each(photos.data, function (index, photo) {
        photos_html += toTemplate(photo);
    });

    $('div#photos-wrap').append(photos_html);

    addClassToSpecificImageParent("http://image.com/onlythisone.jpg", "someClass");
}

更新: 代わりに、詳細を投稿したので、Underscore テンプレートを使用することです

HTML - アンダースコア テンプレート

<script type="text/template" id="photo-template">
      <div class='photo<%= extraclass %>'>
        <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);' />
        <img class='avatar' width='40' height='40' src='<%= avatar %>' />
        <span class='heart'><strong><%= count %></strong></span>
      </div>
</script>

Javascript

function toTemplate(photo) {
    photo = {
        count: photo.likes.count,
        avatar: photo.user.profile_picture,
        photo: photo.images.low_resolution.url,
        url: photo.link,
        extraclass: ""
    };

    if (photo.link === "http://image.com/onlythisone.jpg") {
        photo.extraclass = " someclass";
    }

    return photoTemplate(photo);
}
于 2013-05-17T20:42:35.817 に答える