J'ai une liste de divs avec des images en eux: Lorsqu'un utilisateur clique sur le div, j'aimerais pouvoir modifier l'image sur x-on.png, quand clique Encore une fois, ça va passer à x-off.png, et lorsque vous avez cliqué sur une troisième fois, il devrait revenir à x.png. est-il possible de le faire sans spécifier manuellement jQuery pour chaque changement d'image? Puis-je traverser la div et trouver le nom de l'image et simplement ajouter le -off / -on à l'image? Merci!
8 Réponses :
fwiw, je vous suggère de faire cela à l'aide de CSS uni et arrière-fond-image . Cela me semble que ce n'est pas vraiment des images normales, mais plutôt des "boutons".
Chaque "bouton" a des images différentes [et différentes images à bascule]?
Je ne sais pas combien d'images il y a, mais s'il n'y en a que quelques-uns, l'approche que j'ai suggérée travaille toujours - appliquez simplement une autre classe par exemple. "Un", "Deux" ou "Trois" selon lequel l'état est le bouton.
$('.wizard-img').click(function() {
var img = $(this).find('img');
var src = img.attr('src');
//image is neither on nor off, so change src to on and return
if(src != 'x-on.png' && src != 'x-off.png') {
img.attr('src','x-on.png');
return false;
}
//image is on, so change src to off and return
if(src == 'x-on.png') {
img.attr('src','x-off.png');
return false;
}
//image is off, so change src to x and return
if(src == 'x-off.png') {
img.attr('src','x.png');
return false;
}
});
Désolé, par "x" Je voulais dire le nom de l'image dans la Div, donc ce serait NYT, leguardian, etc ... peut être sélectionné via jQuery?
Peut-être CSS Sprites fonctionnerait pour vous?
qui vous éviterait du chargement Une image séparée chaque fois que vous cliquez sur l'image (bouton?), et vous pouvez résoudre votre problème en ajoutant et en supprimant une classe CSS, par exemple: P>
$('.wizard-img').click(
function() {
if ($(this).hasClass('on')) {
$(this).removeClass('on').addClass('off');
} else if ($(this).hasClass('off')) {
$(this).removeClass('off');
} else {
$(this).addClass('on');
}
}
);
Les deux états seront chargés et prêts lorsque l'utilisateur frappe le bouton, oh et vous réduisez vos demandes qui est toujours une bonne idée :)
C'est sans aucun doute l'itinéraire que je prendrais pour atteindre ce que l'Asseer a besoin.
http://docs.jquerer.com/events/toggle
$(".wizard-img").toggle(
function () {
$(this).find("img").attr({src:"x-on.png"});
},
function () {
$(this).find("img").attr({src:"x-off.png"});
},
function () {
$(this).find("img").attr({src:"x.png"});
}
);
Enlevé à JQuery 1.9
Les sprites CSS seraient effectivement Normalement, je suis le dernier à atteindre un regexp, mais je pense qu'ils ' ll aider ici
J'ai trouvé ce plugin utile de faire quelque chose de similaire à ce que vous avez demandé:
$("img").hover(
function() { this.src = this.src.replace("_Off", "_On");},
function() { this.src = this.src.replace("_On", "_Off");
});
http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/
J'ai créé plugin swapimg: http: // xuannd. wordpress.com/2010/12/03/jQuery-swap-images-asy/
Utilisation: $ ('. swapimg'). Swapimg ();
Opt: $ ('. swapimg'). Swapimg ({imgon: "_ on.png", imgoff: ". PNG"});
(function($){
$.fn.swapimg=function(options){
var defaults={imgOn:"_on.gif",imgOff:".gif"};
var options=$.extend(defaults,options);
var $isOn=false;
var $obj_index=-1;
return this.each(
function(){
if($(this).is('img')){
obj=$(this)
}
else{
obj=$(this).find('img')
}
obj.hover(
function(){
if(this.src.indexOf('_on')==-1){
$isOn=false
}else{
$isOn=true
}
if($isOn==false){
this.src=this.src.replace(options.imgOff,options.imgOn)
}
},
function(){
if($isOn==false){
this.src=this.src.replace(options.imgOn,options.imgOff)
}
}
)
}
)
}
})(jQuery);