Afficher un favoris à un autre endroit

**Danwan** · 28/12/2018, 01h12

Bonjour à tous.

J'ai un script qui fonctionne très bien de cette manière (a voir ci-dessous).
Code trouvé qui fonctionne à merveille.

Seulement j'aimerais que celui-ci indique, si un choix est favorisé, qu'il s'affiche dans un DIV, ailleurs sur mon site permettant de "récapituler" les favoris (créer une sorte de "miroir").

Merci pour votre aide à tous par avance

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul class="list">
  <li id="choix1">choix1</li>
  <li id="choix2">choix2</li>
  <li id="choix3">choix3</li>
  <li id="choix4">choix4</li>
  <li id="choix5">choix5</li>
  <li id="choix6">choix6</li>
</ul>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.list li {
  cursor: pointer;
}
.list li:hover:after,
.list li.fav:after {
  content: ' ok';
  color: rgb(255, 203, 0);
}
.list li.fav:hover:after {
  content: ' supprimer';
}

SCRIPT :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
 
favorites.forEach(function(favorite) {
  document.getElementById(favorite).className = 'fav';
});
 
document.querySelector('.list').addEventListener('click', function(e) {
  var id = e.target.id,
      item = e.target,
      index = favorites.indexOf(id);
 
  if (!id) return;
 
  if (index == -1) {
    favorites.push(id);
    item.className = 'fav';
 
  } else {
    favorites.splice(index, 1);
    item.className = '';
  }
 
  localStorage.setItem('favorites', JSON.stringify(favorites));
});

**Sodium** · 28/12/2018, 14h33

Il va falloir expliciter un peu plus ce que tu veux faire et quelles sont les problématiques rencontrées parce que là c'est très vague.

**Toufik83** · 29/12/2018, 20h10

si on veux traduire tout ça proprement en jQuery, ta page doit être comme celle là

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang='fr'>
<head>
	<meta charset='UTF-8'/>
	<style>
                .list li {
                  cursor: pointer;
                }
                .list li:hover:after,
                .list li.fav:after {
                  content: ' ok';
                  color: rgb(255, 203, 0);
                }
                .list li.fav:hover:after {
                  content: ' supprimer';
                }
        </style>
	<!-- Chargement de jQuery -->
	<script src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		crossorigin="anonymous">
	</script>
 
	<script>
                $(document).ready(function(){//quand le document est prêt (chargé)
                        var favorites = JSON.parse(localStorage.getItem('favorites')) || []
                        ,id,item,index;
                        $.map(favorites,function(v,k){//pour chaque item de favorites
                                
                                //attribution de la class fav
                                $("#"+v).addClass('fav');
                                $('#console').append('<p>'+v+'</p>');//SANS CLIQUE (ou au chargement) affiche les favorites dans div#console (note bien le # au début)
                        });
                        
                        $('.list li').click(function(){//pour chaque li dans .list
                                item=$(this);
                                id=item.attr('id');
                                index=favorites.indexOf(id);
                                 if (!id) return;
                 
                                  if (index == -1) {
                                        favorites.push(id);
                                        item.attr('class','fav');
                                 
                                  } else {
                                        favorites.splice(index, 1);
                                        item.removeClass('fav');
                                  }
                                 $('#console').html(function(){//afficher les favoris dans le div ayant l'id console (note bien le # au début)
                                        return $.map(favorites,function(v,k){//pour chaque item dans favorites
                                                return '<p>'+v+'</p>';//ajoute l'item dans un élément <p>
                                        });
                                 });
                                 localStorage.setItem('favorites', JSON.stringify(favorites));
                        });
                });
        </script>
</head>
<body>
	<ul class="list">
	  <li id="choix1">choix1</li>
	  <li id="choix2">choix2</li>
	  <li id="choix3">choix3</li>
	  <li id="choix4">choix4</li>
	  <li id="choix5">choix5</li>
	  <li id="choix6">choix6</li>
	</ul>
	<div id='console'>
	</div>
</body>
</html>

Afficher un favoris à un autre endroit

jQuery

Vue hybride

Discussions similaires

Partager

Partager