Как сделать мой класс невыбранным

, поэтому у меня есть набор изображений, извлеченных из 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, которые я мог бы добавить для этого? –

Как сделать мой класс невыбранным

ответ

Смежные вопросы