我如何讓我的班級取消選中

因此我有一組圖像從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>

來源

2016-03-04 M. Griffin

這裏的jsfiddle - > 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)); 

      } 
     })();

來源

2016-03-04 14:39:52

非常感謝它的工作原理，但我有更多的一個問題，刷新頁面時，當先前被選中後的圖像具有未選中它顯示了它再次選擇，我將如何將其存儲在本地存儲中？ –

我已經更新了我的答案 –

您知道我可以爲此添加任何javascript測試嗎？ –

我如何讓我的班級取消選中

回答

相關問題