data propre a chaque element

**SpaceFrog** · 24/02/2011, 13h07

voici le script ...
le but est d'avoir un resumé qui se complète sur le mousedown et se raccourcit sur le mouseup

Je n'arrive pas à faire ne sorte que chaque div ait son propre texte

il me colle celui du premier

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
<style type="text/css">
html, body { height:100%;}
</style>
<script type="text/javascript">
$(function(){
$('.resume').data('fulltext',$(this).text())
//$('.resume').click( function(){alert( $(this).data('fulltext').substr(0,50)+'...') })
$('.resume').each(function(){$(this).html($(this).data('fulltext').substr(0,50)+'...')})
$('.resume').mousedown(function(){$(this).html($(this).data('fulltext'))} )
$('.resume').mouseup(function(){$(this).html($(this).data('fulltext').substr(0,50)+'...')} )
})
</script>
</head>
<body>
<div class="resume">
Suspendisse sit amet est dolor, mattis bibendum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer aliquet hendrerit consectetur. Duis nec lorem ut est ornare suscipit. Vivamus non sem nec diam varius blandit vel quis mi. Nulla et lectus arcu. Vivamus erat neque, adipiscing eu porttitor tempor, blandit in odio. In tristique faucibus massa ut laoreet. Ut mollis risus a nisi ornare sit amet sodales ipsum rhoncus. Vivamus ullamcorper bibendum ligula, et volutpat urna gravida sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel dolor et lacus gravida dapibus. Nulla a lorem a justo ultrices sollicitudin vel eu erat. Nam ut enim orci, nec aliquet risus!
Nunc mollis malesuada diam vel auctor. Integer magna turpis, pellentesque in tristique ut, consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
Donec elementum molestie sollicitudin. Cras ac lorem in arcu viverra aliquet. Suspendisse aliquet molestie placerat! Praesent a sem vitae ante tincidunt aliquet ac vel dui. Morbi suscipit malesuada augue, vitae dapibus mi facilisis vel. Cras sit amet tellus arcu, a tristique mi. Aliquam erat volutpat. Proin eu est magna, ac semper nisi. Sed tristique magna sit amet diam ullamcorper congue. Maecenas et nibh elit, eget dictum lacus. Quisque tortor massa, congue quis sollicitudin et, varius non enim. Phasellus ac massa magna. Donec urna erat, tristique id gravida ut, tincidunt quis urna. Nunc molestie nunc vitae ligula suscipit ullamcorper. Curabitur quis risus sit amet arcu sagittis tincidunt. Nunc eu tortor sed urna laoreet gravida. Praesent rutrum, orci ut feugiat vulputate, felis elit lobortis nulla, at ornare tortor felis nec turpis. Phasellus at lectus enim, vel feugiat nulla. Sed ullamcorper ultricies ipsum non placerat.
</div>
<div class="resume">
consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
Donec elementum molestie Suspendisse sit amet est dolor, mattis bibendum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer aliquet hendrerit consectetur. Duis nec lorem ut est ornare suscipit. Vivamus non sem nec diam varius blandit vel quis mi. Nulla et lectus arcu. Vivamus erat neque, adipiscing eu porttitor tempor, blandit in odio. In tristique faucibus massa ut laoreet. Ut mollis risus a nisi ornare sit amet sodales ipsum rhoncus. Vivamus ullamcorper bibendum ligula, et volutpat urna gravida sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel dolor et lacus gravida dapibus. Nulla a lorem a justo ultrices sollicitudin vel eu erat. Nam ut enim orci, nec aliquet risus!
Nunc mollis malesuada diam vel auctor. Integer magna turpis, pellentesque in tristique ut,sollicitudin. Cras ac lorem in arcu viverra aliquet. Suspendisse aliquet molestie placerat! Praesent a sem vitae ante tincidunt aliquet ac vel dui. Morbi suscipit malesuada augue, vitae dapibus mi facilisis vel. Cras sit amet tellus arcu, a tristique mi. Aliquam erat volutpat. Proin eu est magna, ac semper nisi. Sed tristique magna sit amet diam ullamcorper congue. Maecenas et nibh elit, eget dictum lacus. Quisque tortor massa, congue quis sollicitudin et, varius non enim. Phasellus ac massa magna. Donec urna erat, tristique id gravida ut, tincidunt quis urna. Nunc molestie nunc vitae ligula suscipit ullamcorper. Curabitur quis risus sit amet arcu sagittis tincidunt. Nunc eu tortor sed urna laoreet gravida. Praesent rutrum, orci ut feugiat vulputate, felis elit lobortis nulla, at ornare tortor felis nec turpis. Phasellus at lectus enim, vel feugiat nulla. Sed ullamcorper ultricies ipsum non placerat.
</div>
<div class="resume"> Integer magna turpis, pellentesque in tristique ut, consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
Donec elementum molestie
Suspendisse sit amet est dolor, mattis bibendum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer aliquet hendrerit consectetur. Duis nec lorem ut est ornare suscipit. Vivamus non sem nec diam varius blandit vel quis mi. Nulla et lectus arcu. Vivamus erat neque, adipiscing eu porttitor tempor, blandit in odio. In tristique faucibus massa ut laoreet. Ut mollis risus a nisi ornare sit amet sodales ipsum rhoncus. Vivamus ullamcorper bibendum ligula, et volutpat urna gravida sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel dolor et lacus gravida dapibus. Nulla a lorem a justo ultrices sollicitudin vel eu erat. Nam ut enim orci, nec aliquet risus!
Nunc mollis malesuada diam vel auctor. Integer magna turpis, pellentesque in tristique ut, consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
Donec elementum molestie sollicitudin. Cras ac lorem in arcu viverra aliquet. Suspendisse aliquet molestie placerat! Praesent a sem vitae ante tincidunt aliquet ac vel dui. Morbi suscipit malesuada augue, vitae dapibus mi facilisis vel. Cras sit amet tellus arcu, a tristique mi. Aliquam erat volutpat. Proin eu est magna, ac semper nisi. Sed tristique magna sit amet diam ullamcorper congue. Maecenas et nibh elit, eget dictum lacus. Quisque tortor massa, congue quis sollicitudin et, varius non enim. Phasellus ac massa magna. Donec urna erat, tristique id gravida ut, tincidunt quis urna. Nunc molestie nunc vitae ligula suscipit ullamcorper. Curabitur quis risus sit amet arcu sagittis tincidunt. Nunc eu tortor sed urna laoreet gravida. Praesent rutrum, orci ut feugiat vulputate, felis elit lobortis nulla, at ornare tortor felis nec turpis. Phasellus at lectus enim, vel feugiat nulla. Sed ullamcorper ultricies ipsum non placerat.
</div>
</body>
</html>

même en tentant d'attribuer le date au moyen d'un each() :

Code :

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

	 $('.resume').each(function(){$(this).data('fulltext',$(this).text())})

**SpaceFrog** · 24/02/2011, 13h21

fallait juste tout faire en each ^^
y compris l'attribution des datas

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
<style type="text/css">
html, body { height:100%;}
div {border: solid 1px green;}
</style>
<script type="text/javascript">
  $(function(){
	 $('.resume').each( function(){ $(this).data('fulltext',$(this).text()) } )
	//$('.resume').click( function(){alert( $(this).data('fulltext').substr(0,50)+'...') })
	$('.resume').each(function(){$(this).html($(this).data('fulltext').substr(0,50)+'...')})
	$('.resume').mousedown(function(){$(this).html($(this).data('fulltext'))} )
	$('.resume').mouseup(function(){$(this).html($(this).data('fulltext').substr(0,50)+'...')} )
    })
      </script>
 
</head>
<body>
 
<div class="resume">
Suspendisse sit amet est dolor, mattis bibendum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer aliquet hendrerit consectetur. Duis nec lorem ut est ornare suscipit. Vivamus non sem nec diam varius blandit vel quis mi. Nulla et lectus arcu. Vivamus erat neque, adipiscing eu porttitor tempor, blandit in odio. In tristique faucibus massa ut laoreet. Ut mollis risus a nisi ornare sit amet sodales ipsum rhoncus. Vivamus ullamcorper bibendum ligula, et volutpat urna gravida sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel dolor et lacus gravida dapibus. Nulla a lorem a justo ultrices sollicitudin vel eu erat. Nam ut enim orci, nec aliquet risus!
 
Nunc mollis malesuada diam vel auctor. Integer magna turpis, pellentesque in tristique ut, consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
 
Donec elementum molestie sollicitudin. Cras ac lorem in arcu viverra aliquet. Suspendisse aliquet molestie placerat! Praesent a sem vitae ante tincidunt aliquet ac vel dui. Morbi suscipit malesuada augue, vitae dapibus mi facilisis vel. Cras sit amet tellus arcu, a tristique mi. Aliquam erat volutpat. Proin eu est magna, ac semper nisi. Sed tristique magna sit amet diam ullamcorper congue. Maecenas et nibh elit, eget dictum lacus. Quisque tortor massa, congue quis sollicitudin et, varius non enim. Phasellus ac massa magna. Donec urna erat, tristique id gravida ut, tincidunt quis urna. Nunc molestie nunc vitae ligula suscipit ullamcorper. Curabitur quis risus sit amet arcu sagittis tincidunt. Nunc eu tortor sed urna laoreet gravida. Praesent rutrum, orci ut feugiat vulputate, felis elit lobortis nulla, at ornare tortor felis nec turpis. Phasellus at lectus enim, vel feugiat nulla. Sed ullamcorper ultricies ipsum non placerat.
 
</div>
<div class="resume">
 consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
 
Donec elementum molestie Suspendisse sit amet est dolor, mattis bibendum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer aliquet hendrerit consectetur. Duis nec lorem ut est ornare suscipit. Vivamus non sem nec diam varius blandit vel quis mi. Nulla et lectus arcu. Vivamus erat neque, adipiscing eu porttitor tempor, blandit in odio. In tristique faucibus massa ut laoreet. Ut mollis risus a nisi ornare sit amet sodales ipsum rhoncus. Vivamus ullamcorper bibendum ligula, et volutpat urna gravida sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel dolor et lacus gravida dapibus. Nulla a lorem a justo ultrices sollicitudin vel eu erat. Nam ut enim orci, nec aliquet risus!
 
Nunc mollis malesuada diam vel auctor. Integer magna turpis, pellentesque in tristique ut,sollicitudin. Cras ac lorem in arcu viverra aliquet. Suspendisse aliquet molestie placerat! Praesent a sem vitae ante tincidunt aliquet ac vel dui. Morbi suscipit malesuada augue, vitae dapibus mi facilisis vel. Cras sit amet tellus arcu, a tristique mi. Aliquam erat volutpat. Proin eu est magna, ac semper nisi. Sed tristique magna sit amet diam ullamcorper congue. Maecenas et nibh elit, eget dictum lacus. Quisque tortor massa, congue quis sollicitudin et, varius non enim. Phasellus ac massa magna. Donec urna erat, tristique id gravida ut, tincidunt quis urna. Nunc molestie nunc vitae ligula suscipit ullamcorper. Curabitur quis risus sit amet arcu sagittis tincidunt. Nunc eu tortor sed urna laoreet gravida. Praesent rutrum, orci ut feugiat vulputate, felis elit lobortis nulla, at ornare tortor felis nec turpis. Phasellus at lectus enim, vel feugiat nulla. Sed ullamcorper ultricies ipsum non placerat.
 
</div>
<div class="resume"> Integer magna turpis, pellentesque in tristique ut, consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
 
Donec elementum molestie 
Suspendisse sit amet est dolor, mattis bibendum arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer aliquet hendrerit consectetur. Duis nec lorem ut est ornare suscipit. Vivamus non sem nec diam varius blandit vel quis mi. Nulla et lectus arcu. Vivamus erat neque, adipiscing eu porttitor tempor, blandit in odio. In tristique faucibus massa ut laoreet. Ut mollis risus a nisi ornare sit amet sodales ipsum rhoncus. Vivamus ullamcorper bibendum ligula, et volutpat urna gravida sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vel dolor et lacus gravida dapibus. Nulla a lorem a justo ultrices sollicitudin vel eu erat. Nam ut enim orci, nec aliquet risus!
 
Nunc mollis malesuada diam vel auctor. Integer magna turpis, pellentesque in tristique ut, consectetur sed enim. Aenean mattis eros vitae est congue elementum. Maecenas molestie tellus vel urna vehicula tristique! Duis elit justo, ornare eu pellentesque a, fermentum a magna. Aliquam dolor justo, tincidunt vitae lobortis ac, iaculis ac massa. Quisque ac tortor vitae risus sodales lacinia? Aliquam ultricies, neque a tempor adipiscing, erat turpis volutpat ante, accumsan mattis eros metus quis sem. Curabitur auctor; enim vitae mollis viverra; nisl felis ornare nibh, eget dignissim elit nulla nec enim! In interdum mattis libero, eu iaculis purus euismod et? Morbi nisi diam, condimentum vel aliquam at, posuere tempus felis.
 
Donec elementum molestie sollicitudin. Cras ac lorem in arcu viverra aliquet. Suspendisse aliquet molestie placerat! Praesent a sem vitae ante tincidunt aliquet ac vel dui. Morbi suscipit malesuada augue, vitae dapibus mi facilisis vel. Cras sit amet tellus arcu, a tristique mi. Aliquam erat volutpat. Proin eu est magna, ac semper nisi. Sed tristique magna sit amet diam ullamcorper congue. Maecenas et nibh elit, eget dictum lacus. Quisque tortor massa, congue quis sollicitudin et, varius non enim. Phasellus ac massa magna. Donec urna erat, tristique id gravida ut, tincidunt quis urna. Nunc molestie nunc vitae ligula suscipit ullamcorper. Curabitur quis risus sit amet arcu sagittis tincidunt. Nunc eu tortor sed urna laoreet gravida. Praesent rutrum, orci ut feugiat vulputate, felis elit lobortis nulla, at ornare tortor felis nec turpis. Phasellus at lectus enim, vel feugiat nulla. Sed ullamcorper ultricies ipsum non placerat.
 
</div>
</body>
</html>

data propre a chaque element

jQuery

Discussions similaires

Partager

Partager