2017-08-13 14 views
1

Je cherchais un moyen de changer l'image A à B et B à A par juste en cliquant sur eux.Comment créer efficacement des centaines de boutons d'image à bascule?

Jusqu'ici, c'est ce que j'utilise.

<img id="pixelbutton" src="images/pixelbutton.png" /> 
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" /> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#pixelbutton").click(function(){ 
     $("#pixelbutton").css({'display':'none'}) 
     $("#pixelbutton2").css({'display':'block'}); 
    }) 
    $("#pixelbutton2").click(function(){ 
     $("#pixelbutton2").css({'display':'none'}) 
     $("#pixelbutton").css({'display':'block'}); 
    }) 
}) 
</script> 

Le script fonctionne bien pour une paire d'images. Maintenant, si j'ai 100 paires d'images.

"A <--> B" 
"C <--> D" 
"E <--> F" 

et ainsi de suite ...

Dois-je copier le code HTML du corps et un script 100 fois et changer leur carte d'identité + URL ou il y a une autre façon plus efficace?

+0

Tout en vous assurant ... les images seront les mêmes pour tous les 100 mais beaucoup vous voulez en droit? – Poootaatoooo

+0

L'appariement sera corrigé. L'image sera différente les uns des autres. Donc, si A est déjà associé à B, l'image A ou B ne sera associée à aucune autre image. – Velo

Répondre

2

Pour créer des centaines d'entre eux ... Tout d'abord, utiliser une classe. Ensuite, utilisez un attribut data pour stocker l'URL "alternative".

<img class="pixelbutton" src="images/pixelbutton.png" data-altsrc="images/pixelbutton_press.png"/> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".pixelbutton").click(function(){ 

    // Get the two values 
    var src = $(this).attr("src"); 
    var altSrc = $(this).data("altsrc"); 

    // Switch them 
    $(this).attr("src",altSrc).data("altsrc",src); 
    }); 
}) 
</script> 

Cela fonctionne pour des milliers de .pixelbutton ...
;)


EDIT

Comme par cet autre .data() documentation, (je me demande pourquoi il y a deux pages de documentation différentes .. .) les data-* doivent être en minuscules ... Parce que lorsque vous essayez d'obtenir altSrc, il est interprété comme alt-src.

Je viens d'apprendre que ... C'est tout à fait une étrange nouvelle norme, de jQuery 3.

Voici donc your CodePen updated.

+0

J'ai essayé, mais je n'ai pas travaillé. Qu'ai-je fait de mal? https://codepen.io/Velocodes/pen/MEyjZZ – Velo

+0

Votre CodePen n'avait pas la librairie jQuery chargée ... Mais ce n'était pas seulement ça. Voir éditer. ;) –

1

Vous pouvez probablement définir un modèle de dénomination et utiliser la délégation pour créer un gestionnaire d'événements sur le conteneur des images.

Vous pouvez vérifier si la cible de l'événement est une image et récupérer son identifiant. En utilisant cet identifiant, vous pouvez utiliser le motif que vous avez défini pour changer les images de façon interchangeable.

1

Il existe de multiples solutions à cela, mais cela est de loin l'approche la plus simple:

  1. Enveloppez vos paires d'images dans un parent <div>
  2. Utilisez .toggleClass() pour activer une classe, par exemple .hide, dans les images dans l'élément

Cette solution suppose que vous avez des images par paires :) voir la preuve de concept exemple:

$(document).ready(function() { 
 
    $('img').click(function() { 
 
    console.log($(this).siblings()); 
 
    $(this).add($(this).siblings()).toggleClass('hide'); 
 
    }); 
 
});
/* For layout only */ 
 
div { 
 
    display: inline-block; 
 
} 
 

 
/* Used to hide image */ 
 
.hide { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://via.placeholder.com/100x100/999999/ffffff" /> 
 
    <img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" /> 
 
</div>

0

Essayez celui-ci:

jQuery(document).ready(function($) { 
 
    var $imgBlock = $('#images'); 
 
    var html = ''; 
 
    var imgArr = [ 
 
    'http://i0.wallpaperscraft.com/image/surface_shape_metal_116716_200x300.jpg', 
 
    'http://i0.wallpaperscraft.com/image/universe_space_face_rocket_116714_200x300.jpg', 
 
    'http://i0.wallpaperscraft.com/image/letter_surface_wooden_116674_200x300.jpg', 
 
    'http://i0.wallpaperscraft.com/image/mountains_lake_reflection_116663_200x300.jpg', 
 
    'http://i1.wallpaperscraft.com/image/leaf_drops_surface_116678_200x300.jpg', 
 
    'http://i1.wallpaperscraft.com/image/candle_spruce_christmas_decoration_116684_200x300.jpg' 
 
    ]; 
 

 
    $.each(imgArr, function(index, url) { 
 
    html += (index % 2 === 0) ? '<div>' : ''; 
 
    html += '<img src="' + url + '"/>'; 
 
    html += (index % 2 === 1 || index === imgArr.length - 1) ? '</div>' : ''; 
 

 
    }); 
 

 
    $imgBlock.append(html); 
 

 
    $imgBlock.on('click', 'img', function(e) { 
 
    $(this).parent('div').find('img').removeClass('red'); 
 
    $(this).addClass('red'); 
 
    }); 
 
});
img { 
 
    border: 2px solid #ccc; 
 
} 
 

 
.red { 
 
    border: 2px solid red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="images"></div>