Discussion :

[bajoe]

Hola, bonjour à tous,

J'ai réalisé des "boutons/puces" lien pour filtrer des informations sur une page.

Chacun d'entre eux a un code couleur différent, et je souhaiterais qu'en cliquant dessus, ils changent de couleur (selon s'ils sont actifs ou non actifs).

Comment faire pour modifier le style css au niveau des .tags li:first-child a:before, .tags li:nth-child(2) a:before, etc... en JQuery?

Le code HTML :

Code :

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

1
2
3
4
5
6
7
<ul class="tags">
<li><a href="#" class="BtnFiltre" id="winbet">Paris gagnés</a></li>
<li><a href="#" class="BtnFiltre" id="lostbet">Paris perdus</a></li>
<li><a href="#" class="BtnFiltre" id="inprogressbet">Paris en cours misés</a></li>
<li><a href="#" class="BtnFiltre" id="inprogressnobet">Paris en cours non misés</a></li>
<li><a href="#" class="BtnFiltre" id="endedbetnobet">Paris terminés ou clôturés non misés</a></li>
</ul>

Le code JS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
 
$(document).ready(function() {
 
$('.BtnFiltre').click(function(){
var BtnFiltreValue = $(this).attr('id');
var ajaxurl = 'change.php',
data =* {'action': BtnFiltreValue};
$.post(ajaxurl, data, function (response) {
alert("action performed successfully");
});
});
});
</script>

Le code CSS :

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
.tags {
    margin: 0;
    padding: 0;
    position: relative;
    right: 9px;
    /* bottom: -12px; */
    list-style: none;
}
 
.tags li, .tags a {
    float: left;
    height: 24px;
    line-height: 24px;
    position: relative;
    font-size: 11px;
    margin-bottom: 5px;
}
 
.tags li:first-child a{ background:#4CAF50; }
.tags li:first-child a:before{ border-color:transparent #4CAF50 transparent transparent;}
 
.tags li:nth-child(2) a{ background:#e65224; }
.tags li:nth-child(2) a:before{ border-color:transparent #e65224 transparent transparent;}
 
.tags li:nth-child(3) a{ background:#0089e0; }
.tags li:nth-child(3) a:before{ border-color:transparent #0089e0 transparent transparent;}
 
.tags li:nth-child(4) a{ background:#FEC300; }
.tags li:nth-child(4) a:before{ border-color:transparent #FEC300 transparent transparent;}
 
.tags li:nth-child(5) a{ background:#8CC6D7; }
.tags li:nth-child(5) a:before{ border-color:transparent #8CC6D7 transparent transparent;}
 
.tags a{
	margin-left:20px;
	padding:0 10px 0 12px;
	background:#0089e0;
	color:#fff;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;
	border-top-right-radius:4px;
}
 
.tags a:before{
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #0089e0 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;
}
 
.tags a:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:4px;
	height:4px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
}
 
.tags a:hover{background:#555;}
.tags a:hover:before{border-color:transparent #555 transparent transparent;}

[mathieu]

il existent plusieurs sélecteurs qui sont listés sur la page suivante :
http://api.jquery.com/category/selectors/

[bajoe]

Bonjour et merci pour ta réponse.

J'avais déjà consulté cette page, mais je n'arrive pas à manipuler mes éléments malgré tout.

Si je sélectionne directement l'élément, ça fonctionne :

Code :

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

$( "#winbet" ).css( "background", "grey" );

Mais si je reprends la variable, pour rendre le tout dynamique, ça ne fonctionne plus :

Code :

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

$(this).attr('id').css( "background", "grey" );

Egalement, je ne sais pas comment faire pour également modifier le border-color du :before (que tu peux voir dans le css), exemple :

Code :

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

1
2
.tags li:first-child a{ background:#4CAF50; }
.tags li:first-child a:before{ border-color:transparent #4CAF50 transparent transparent;}

[bajoe]

Bonne nouvelle, j'ai trouvé comment faire pour le 1er point :

Code :

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

$('#' + BtnFiltreValue ).css( "background", "grey" );

Mais toujours aucune idée pour la modification du pseudo-élément :before... HELP

[bajoe]

J'ai essayé cette méthode mais elle ne fonctionne pas non plus...

Code :

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

$('#' + BtnFiltreValue + ':before').css( "border-color", "transparent grey transparent transparent" );

[danielhagnoul]

Ma FAQ jQuery Comment puis-je modifier le style des pseudo-éléments ?