Mot clé "This"

**erichou7** · 10/08/2015, 17h31

Bonjour,

Je ne sais pas comment optimiser le code ci-dessous, qui fonctionne mais qui se répète beaucoup trop, j'ai fait quelques petits tests entre autres avec "this" mais je n'ai pas réussis..

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
<script>
**$(document).ready(function () {
****$('a[href="#join"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="join"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#find-parking"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="find-parking"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#parking-minute"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="parking-minute"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#reserve"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="reserve"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#parking-mounth"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="parking-mounth"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#getin-getout"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="getin-getout"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#community"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="community"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****}); </script>

Ce que j'ai essayé et ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
<script>
**$(document).ready(function () {
****$('a[href="#join"], a[href="#find-parking"], etc..').click(function (e) {
******e.preventDefault();
******var targetOffset = $(this).offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
</script>

Merci d'avance

**SylvainPV** · 10/08/2015, 17h48

C'est la guerre des étoiles ?

Utilise event.currentTarget pour récupérer l'élement d'où provient l'évènement, et ajoute une classe à tes liens concernés plutôt que tous les lister un par un (ici j'ai choisi targetToScroll) :

Code :

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

1
2
3
4
5
 $('a.targetToScroll').click(function (e) {
      e.preventDefault();
      var targetOffset = $(e.currentTarget).offset().top;
      $('body').animate({ scrollTop: targetOffset }, 600);
});

je crois que this marche aussi car jQuery change le contexte d'appel pour les events listeners, mais je préfère les bonnes vieilles méthodes

**ABCIWEB** · 11/08/2015, 01h14

"this" n'est pas un mot clé avec jquery, le mot clé qui correspond à l'objet est "$(this)".

Par ailleurs un simple ciblage avec $('body') ne fonctionnera pas avec IE ou Firefox. Il faut viser aussi le html.

En reprenant la suggestion de SylvainPV cela donne :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Document sans nom</title>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function() {	   
	$('a.targetToScroll').click(function (e) 
	{
		e.preventDefault();
		var targetOffset = $(this).offset().top;
		$('html,body').animate({ scrollTop: targetOffset }, 600);
	});
 });
</script>
</head>
 
<body>
<div style="height:500px"></div>
<a href="#a" class="targetToScroll" >azerty</a>
<a href="#b" class="targetToScroll">wxcvbn</a>
<div style="height:2500px"></div>
</body>
</html>

Mot clé "This"

JavaScript

Discussions similaires

Partager

Partager