simplification de code

**arnlig3550** · 09/07/2013, 19h36

Bonjour,

J'ai fais un code en jquery qui fonctionne selon mon besoin, mais étant débutant, je suis presque sûr que l'on pourrait simplifier ce code.

Le voici:

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
25
26
$("#btn_1").click(function() { 
	$('#new1').css({display:'none'});
	localStorage['cle1'] = "news"; //créer clé au clic
});
$("#btn_2").click(function() {
	$('#new2').css({display:'none'});
	localStorage['cle2'] = "news";
});
$("#btn_3").click(function() {
	$('#new3').css({display:'none'});
	localStorage['cle3'] = "news";
});
$(document).ready(function(){ //si la clé existe, on enlève le "1" et le "new"
	if(localStorage['cle1']) {
		$('#new1').css({display:'none'});
	}
	if(localStorage['cle2']) {
		$('#new2').css({display:'none'});
	}
	if(localStorage['cle3']) {
		$('#new3').css({display:'none'});
	}
	else {
		return ;
	}
});

Pour expliquer un peu...

C'est pour montrer les nouveautés à l'aide d'une image "new".

J'ai donc 3 boutons, et quand on clique dessus, cela cache l'image correspondant et crée une clé localStorage.
Et lors d'une prochaine visite, on détecte les clés existantes et l'on cache la ou les images "new" correspondant (cela veut dire que le visiteur a déja vu les news).

Donc ma question, peut-on simplifier ce code, et donc le rendre moins lourd ?

Merci

**SpaceFrog** · 10/07/2013, 08h35

avec ton nommage rationnel il faut penser index, et donc factorisation ou boucles ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#btn_1, #btn_2, #btn_3", ).click(function() { 
         idx=$(this).attr('id').split('_')[1];
	$('#new'+idx).css({display:'none'});
	localStorage['cle'+idx] = "news"; //créer clé au clic
});
 
$(document).ready(function(){ //si la clé existe, on enlève le "1" et le "new"
var i=0
while(++i<4){	
if(localStorage['cle'+i]) {
		$('#new'+i).css({display:'none'});
	}
});

**danielhagnoul** · 10/07/2013, 11h15

Une variante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$( function(){	
	for ( var item in window.localStorage ){
		if ( item.indexOf( "cle" ) > -1 ){
			$( "#new" + item.slice( - 1 ) ).css( "display", "none" );
		}
	}
 
	$( "[id^='btn_']" ).on( "click", function(){
		var n = this.id.slice( -1 );
		$( "#new" + n ).css( "display", "none" );
		window.localStorage[ "cle" + n ] = "news " + n;
	});
});

**omdafer** · 10/07/2013, 16h32

Ou alors définir une class sur ces bouton, récupérer l'Id du bouton cliqué, son index, puis l'action voulu.

Code html :

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

1
2
3
4
<input type="button" class="bontonnews" id="btn_1" />
<input type="button" class="bontonnews" id="btn_2" />
<input type="button" class="bontonnews" id="btn_3" />
...

Automatiser complètement, à adapter.

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
$(".bontonnews").click(function() { 
         idx=$(this).attr('id').split('_')[1];
    $('#new'+idx).css({display:'none'});
    localStorage['cle'+idx] = "news"; //créer clé au clic
    return false;
});
 
$(document).ready(function(){ //si la clé existe, on enlève le "1" et le "new"
var i=0
nb=$(".bontonnews").length;
while(++i<=nb){    
if(localStorage['cle'+i]) {
        $('#new'+i).css({display:'none'});
    }
});

**arnlig3550** · 10/07/2013, 17h27

Bonjour

Merci pour votre aide !

J'ai donc testé les 3 codes, résultat:

SpaceFrog, j'ai une erreur dans la console (Chrome) et je ne trouve pas l'erreur (pas assez de compétence, ces 3 codes sont pour moi du chinois

) donc du coup il ne fonctionne pas

danielhagnoul, le code fonctionne bien, apart qu'il y a une clé localStorage qui se crée toute seule au chargement du site, est-ce normal ?

et omdafer, le code fonctionne aussi (mais il manque une accolade à la fin

), sauf que, quand j'actualise la page il ne marche plus, il rentre en conflit je pense avec d'autres code du site car je ne maitrise plus rien ^^

donc pour l'instant je reste sur celui de danielhagnoul !

il y a juste à voir l'histoire de la clé ...

**danielhagnoul** · 11/07/2013, 01h19

Bonsoir

Il peut subsister une ou plusieurs clés d'un autre test. Je vous conseille d'effacer le contenu du localStorage avant de tester.

Je n'ai pas de problème avec ma page de test :

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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			//"http://code.jquery.com/jquery-1.10.1.min.js",
			"http://code.jquery.com/jquery-2.0.2.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.2.1/purl.min.js",
			function(){
 
				$( function(){	
					for ( var item in window.localStorage ){
						if ( item.indexOf( "cle" ) > -1 ){
							$( "#new" + item.slice( - 1 ) ).css( "display", "none" );
						}
					}
 
					$( "[id^='btn_']" ).on( "click", function(){
						var n = this.id.slice( -1 );
						$( "#new" + n ).css( "display", "none" );
						window.localStorage[ "cle" + n ] = "news " + n;
					});
 
					/*
					 * cle1 : news 1
					 * cle2 : news 2
					 * cle3 : news 3 
					 */
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<button id="btn_1">Btn 1</button>
		<button id="btn_2">Btn 2</button>
		<button id="btn_3">Btn 3</button>
 
		<div id="new1">News 1</div>
		<div id="new2">News 2</div>
		<div id="new3">News 3</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-11T01:09:14.644+02:00" pubdate>2013-07-11T01:09:14.644+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**SpaceFrog** · 11/07/2013, 08h24

une virgule en trop et une fermeture de }) manquante ...

http://jsfiddle.net/n3zjv/1/

**arnlig3550** · 11/07/2013, 16h18

Bonjour à tous,

danielhagnoul, j'ai bien effacé les clé localStorage, vérifier le code puis recharger le site, mais rien à faire, j'ai toujours une clé qui se crée au chargement ... Sans doute un conflit.

J'ai donc testé le code modifié de SpaceFrog, et en effet il fonctionne nickel !
Je vais donc rester sur ce code, mais j'aimerai le comprendre ^^

Que veut dire cette ligne?

Code :

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

while (++i < 4)

**SpaceFrog** · 11/07/2013, 16h26

Code :

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

1
2
3
4
var i=-1;
while (++i < 6){
alert(i)
}

ça répond a ta question ?

**arnlig3550** · 11/07/2013, 16h55

Je pense avoir compris que l'on incrémente 1 jusqu'a maximum 5 ?
Donc dans mon code, le chiffre 4 correspond à mes 3 boutons, si j'ajoute un bouton, va falloir mettre 5, c'est ça ?

**SpaceFrog** · 11/07/2013, 17h11

oui, ou alors passer par un for avec le length (nombre de boutons)

**arnlig3550** · 11/07/2013, 17h29

Ok, je crois que je vais laisser comme ça ^^

Il me reste une petite une question.
Dans mon code d'origine cité dans mon 1er message, il y a une petite partie de code que j'ai oublié de vous mettre dans la 2ème partie:

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
$(document).ready(function(){<!--si la clé existe, on enlève le "1" et le "new"-->
	if(localStorage['cle1']) {
		$('#new1').css({display:'none'});
		$('#gallery').addClass('hidenew1');
	}
	if(localStorage['cle2']) {
		$('#new2').css({display:'none'});
		$('#gallery').addClass('hidenew2');
	}
	if(localStorage['cle3']) {
		$('#new3').css({display:'none'});
		$('#gallery').addClass('hidenew3');
	}
	else {
		return ;
	}
});

Comme vous l'aurez peut-être vu, il y a 3 lignes quasiment identiques (seule le nom de la class change), enfait chaque cle correspond à une class css, un peu comme avant avec les boutons, je pensais donc remplacer ces 3 lignes par celle là:

Code :

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

$('#gallery').addClass('hidenew + i');

Est-ce bon ?

**arnlig3550** · 11/07/2013, 20h41

Bon bah j'ai testé et ça ne fonctionne pas, ça aurait été trop beau ^^

SpaceFrog peux tu m'aider à finir ce code ? ou quelqu'un d'autre

Merci

**SpaceFrog** · 12/07/2013, 09h49

Code :

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

$('#gallery').addClass('hidenew' + i)

[edit]
apostrophe oubliée supprimée
[\edit]

**arnlig3550** · 12/07/2013, 11h00

Bonjour,

Merci SpaceFrog ! ça marche, enfait j'en été pas loin, juste une erreur de placement d'apostrophe ^^ en faisant attention j'aurai pû trouver tout seul

^^

Parcontre SpaceFrog, tu as mis une apostrophe en trop

mais ça je l'ai vu ^^

Donc sujet résolu pour moi

Merci à vous

A bientôt !

**arnlig3550** · 16/07/2013, 20h13

Bonjour,

Etant en pleine amélioration de mon site, il m'est venu une nouvelle idée, donc j'ai encore ajouté du code au code précédemment simplifier, donc j'aimerai aussi simplifier cette nouvelle partie de code, sauf que je n'arrive pas à lier tous les codes.

Voici la portion de code rajouté:

Code :

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

1
2
3
4
5
6
7
8
9
$('#gallery').on('click', 'li[data-id="28"]', function(){
	$('#gallery').addClass('hidenew1');
});
$('#gallery').on('click', 'li[data-id="46"]', function(){
	$('#gallery').addClass('hidenew2');
});
$('#gallery').on('click', 'li[data-id="51"]', function(){
	$('#gallery').addClass('hidenew3');
});

J'ai réussi à faire comme le code précédemment simplifié, comme ceci:

Code :

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

1
2
3
4
$('#ccgallery').on('click', 'li[data-id="28"], li[data-id="46"], li[data-id="51"]', function(){
	dataidx = $(this).data('id');
	$('#ccgallery').addClass('hidenew' + dataidx);
});

mais le problème est que les data-id n'ont pas les même n° que ceux des class, donc ma question est comment lier [data-id="28"] à la class hidenew1, [data-id="46"] à la class hidenew2 et [data-id="51"] à la class hidenew3 ?

Sachant que je ne peux changer le nom de mes class, car elles sont en lien avec mes clés localStorage, et que je ne peux changer aussi les data-id (et les data-id changeront à chaque mise à jour du site)

J'ai une solution toute simple qui consiste a recréer les 3 même class dans mon style.css, c'est a dire au lieu de mettre hidenew1 hidenew2 hidenew3 je mettrais hidenew28 hidenew46 hidenew51, mais ca me ferai changer à chaque mise à jour du site ... :/

Ya t-il une meilleure solution ?

**Macmillenium** · 16/07/2013, 21h38

Code :

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

1
2
3
4
5
6
 
$('#ccgallery').on('click', 'li', {28:1,46:2,51:3}, function(e){
    var dataidx = $(this).data('id');
    e.data[dataidx] = e.data[dataidx] || 'par-default';
    $('#ccgallery').addClass('hidenew' + e.data[dataidx]);
});

**arnlig3550** · 17/07/2013, 11h37

Bonjour

Merci Macmillenium, ton code fonctionne très bien !

Mais je ne comprends pas la ligne 4, peux tu m'expliquer ?

**Macmillenium** · 18/07/2013, 11h16

Mais je ne comprends pas la ligne 4, peux tu m'expliquer ?

Affecter une valeur par défault si le dataidx n'appartient pas à l'objet data passé en argument.
Tu peux aussi court-circuiter la fonction avec un return si e.data[dataidx] est undefined.

Code javascript :

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

1
2
3
4
5
6
 
$('#ccgallery').on('click', 'li[data-id]', {28:1,46:2,51:3}, function(e){
    var dataidx = $(this).data('id');
    if (!e.data[dataidx]) { return; }
    $('#ccgallery').addClass('hidenew' + e.data[dataidx]);
});

**arnlig3550** · 18/07/2013, 11h29

Bonjour,

Quelle solution est la plus propre ? ^^

simplification de code

jQuery

Discussions similaires

Partager

Partager