Question

所以我从flickr api中提取了一组图片，这样你就可以点击自己喜欢的图片，然后将它们保存在本地存储中，这样当你刷新它再次显示它们时。

我只是不确定如何让我选择的图像再次被取消选择。

    <!doctype html>
<html>
    <head>
        <style media="screen">
            .selected {
                border: 1px solid;
                border-radius: 50%;
            }
        </style>
        <script type="text/javascript">
            (function(){
                var tags='london';
                var script = document.createElement('script');
                window.storage = JSON.parse(localStorage.getItem('images')) || [];
                console.log(window.storage);
                window.cb = function(data){
                    console.log(data);
                    for (var i = 0; i < data.items.length; i++) {
                        var image = data.items[i];
                        var classImage = "";
                        if(window.checkimageSelected(image)){
                            classImage = 'selected'
                        }
                        document.getElementById('images').innerHTML += '<img class="'+classImage+'" id="'+i+'" onClick="imageClick(this, '+ i +');" src=' + image.media.m +'/>' ;
                    }
                }

                window.checkimageSelected = function (image) {
                    for (var i = 0; i < window.storage.length; i++) {
                        console.log(window.storage[i].src);
                        console.log(image.media.m);
                        if ((window.storage[i].src ) == image.media.m + '/'){
                            return true;
                        }
                    }
                    return false;
                }
                script.src='http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=window.cb&tags='+tags;
                document.head.appendChild(script);
                window.imageClick = function(el, id){
                    el.className += " selected";
                    console.log(el.src);
                    console.log(id);
                    window.storage.push({'id' : id , 'src' : el.src});
                    localStorage.setItem('images', JSON.stringify(window.storage));

                }
            })();
        </script>
    </head>
    <body>
        <div id="images">

        </div>
    </body>
</html>

Answer 1

这里有一个jsfiddle - ＆gt; https://jsfiddle.net/3qwk8zv0/

  (function(){
     function toggleClass(element, className){
      if (!element || !className){
          return;
      }

      var classString = element.className, nameIndex = classString.indexOf(className);
      if (nameIndex == -1) {
          classString += ' ' + className;
      }
      else {
          classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
      }
      element.className = classString;
  }


            var tags='london';
            var script = document.createElement('script');
            window.storage = JSON.parse(localStorage.getItem('images')) || [];
            console.log(window.storage);
            window.cb = function(data){
                console.log(data);
                for (var i = 0; i < data.items.length; i++) {
                    var image = data.items[i];
                    var classImage = "";
                    if(window.checkimageSelected(image)){
                        classImage = 'selected'
                    }
                    document.getElementById('images').innerHTML += '<img class="'+classImage+'" id="'+i+'" onClick="imageClick(this, '+ i +');" src=' + image.media.m +'/>' ;
                }
            }

            window.checkimageSelected = function (image) {
                 var result = window.storage.filter(function(obj){  return obj.src.indexOf(image.media.m)>-1 && obj.isSelected });                    
              return (result && result.length>0);
            }
            script.src='https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=window.cb&tags='+tags;
            document.head.appendChild(script);
            window.imageClick = function(el){
               toggleClass(el,"selected");

                    var currentImage = window.storage.filter(function(obj){  return  el.src == obj.src})[0];
                  if (!currentImage) {
                  currentImage = {'src' : el.src};
                  window.storage.push(currentImage);
                  }
                       if (el.className.indexOf('selected')==-1){
                 currentImage.isSelected = false;
                 }else{
                          currentImage.isSelected = true;
                 }
                localStorage.setItem('images', JSON.stringify(window.storage));

            }
        })();

如何取消选择我的课程

1 个答案: