la condition if avec Jquery

Version imprimable

Bonjour,

j'aimerais savoir si la condition " if " fonctionne avec jquery ?

j'aimerais faire cela :
Code:

1 2 3 4 5 6 7 $(document).ready(function(){ if(!$(".articles").css("display:none")) $("#suite").html("Cliquez sur le texte pour cacher l'extension de l\'articles"); if(!$(".articles").css("display:block")) $("#suite").html("Cliquez sur le texte pour lire la suite de l\'articles"); });
Si vous ne saisissez pas le sens, voila ce que j'ai voulu faire:

j'aimerais que lorsque la div articles est afficher (visible) le texte : ... cacher extension... remplace celui de ...lire la suite...
de même dans l'autre sens, lorsque la div articles est cacher on affiche le texte ...lire la suite...

est-ce que ça a un sens , ais-je compris le principe ??

merci pour vos réponses

PS: j'utilise ce code dans un toggle Jquery pour la récuperation d'articles PHP via Mysql

09/03/2011, 13h41
Bovino

Alors oui, if fonctionne très bien avec jQuery, mais ton utilisation est mauvaise :aie:
Dans ta condition, tu sélectionnes des objets jQuery ($(".articles")), puis tu leur affectes un style CSS (.css("display:none")).
Or une méthode jQuery renvoie systématiquement l'objet qu'elle vient de traiter, donc dans ton cas, la condition sera toujours équivalente à true et son not équivalent à false !
Utilise plutôt le sélecteur :visible ;)

merci pour vos réponses,

j'ai suivi vos conseils:

Code:

1
2
3
4
5
 
if($(".articles").css("visibility:hidden"))
	$("#suite").html("Cliquez sur le texte pour cacher l'extension de l\'articles");
if($(".articles").css("visibility:visible"))
	$("#suite").html("Cliquez sur le texte pour lire la suite de l\'articles");

j'ai egalement essayer avec:

Code:

1
2
3
4
5
 
if($(".articles").hide())
	$("#suite").html("Cliquez sur le texte pour cacher l'extension de l\'articles");
if($(".articles").show())
	$("#suite").html("Cliquez sur le texte pour lire la suite de l\'articles");

ça ne change rien , l'effet désiré n'a pas lieu

j'ai également essayé ça:

Code:

1
2
3
4
5
 
if(document.getElementById('article').style.display='block')
	document.getElementById('suite').innerHTML='Cliquez sur le texte pour cacher l\'extension de l\'articles';
if(document.getElementById('article').style.display='none')
	document.getElementById('suite').innerHTML='Cliquez sur le texte pour lire la suite de l\'articles';

une fois de plus merci pour vos réponses

Plop,
essayes plutot un truc du genre:

Code:

1
2
3
4
5
6
7
8
9
 
if( $(".articles:visible").length > 0 )
{
  $("#suite").html("Cliquez sur le texte pour cacher l'extension de l\'articles");
}
else
{
  $("#suite").html("Cliquez sur le texte pour lire la suite de l\'articles");
}

09/03/2011, 17h21
Bovino

Code:

if(document.getElementById('article').style.display='block')

:mouarf:
Là, tu fais une affectation, pas une comparaison :aie:
Mais essaye la solution de erox44 qui correspond à ta demande !
09/03/2011, 19h03
artenis

1 pièce(s) jointe(s)

le problème a l'air plus compliquer que prévu et il se peut qu'il y ait des conflits
d'affichage :

je m'explique :

chaque page de mon site récupère des articles (titre, date , sujet apercu "visible" et sujet restant "cacher" - au click devient "visible")
ces articles sont récupérer avec php via mysql

pour les solutions que vous m'avez fourni le texte ne change pas

en piece jointe voici la représentation de ce qui se passe: si ça peut vous aider à m'expliquer mes erreurs
Pièce jointe 74188

De plus j'a i un autre probleme tout ce que j'essaie de faire en vous posant ces questions: est pour deux buts:

1er: signaler aux visiteurs qu'en cliquant sur le texte ils peuvent lire la suite (cahcer)
2eme but: le toggle de jquery appliqué sur toute la partie visible de l'article empeche de lire les liens (hypertext) contenu dans cette article visible - car il n'y a pas de problème sur la partie cacher(lorsqu'elle est révélée)

j'espère que je vous ai pas embrouiller avec mes explications , merci

De plus j'ai remarquer que lorsque ça marche (changement de texte)
cela ne s'applique que pour le premier article les autres sont laissé a l'abandon

Une idée sur ce probleme

Bonsoir

Par rapport au message n° 1, exemple avec is(":visible") et fadeToggle() :

Code:

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
		.articles {display:none; width:100px; height:100px; background-color: red; border:1px solid gray; }
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<div class="articles"></div>
		<div id="suite">La suite ...</div>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script>
        $(function(){
			$("#suite").click(function(){
				$(".articles").fadeToggle(800, function(){
					if ($(this).is(":visible")){
						$("#suite").html("Cliquez sur le texte pour cacher l'extension de l'articles");
					} else {
						$("#suite").html("Cliquez sur le texte pour lire la suite de l'articles");
					}
				});
			});
        });
    </script>
</body>  
</html>