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/

simplification de code

jQuery

Vue hybride

Discussions similaires

Partager

Partager