1
votes

Transformez le code JQuery répétitif en code propre

J'ai donc ce code mais j'ai pensé qu'il était trop répétitif, quelqu'un a une idée de comment je pourrais faire ça? Lors du téléchargement d'une nouvelle image, je souhaite qu'une nouvelle zone d'image s'affiche. Ma solution fonctionne, mais que faire si je souhaite avoir 1000 nouvelles images? Je ne peux pas en taper un à la fois. Que puis-je faire pour optimiser ce problème?

HTML:

$('#image1').change(function (ev) {
    $("#box_image_2").show();
});

$('#image2').change(function (ev) {
    $("#box_image_3").show();
});

$('#image3').change(function (ev) {
    $("#box_image_4").show();
});

$('#image4').change(function (ev) {
    $("#box_image_5").show();
});

Javascript:

Lorsqu'une image est téléchargée, cette JQuery est appelée.

<div class="wrapper">
    <div class="box box_image" id="box_image_1">
        <div class="js--image-preview"></div>
        <div class="upload-options">
            <label>
                <input type="file" class="image-upload" id="image1" data-show='box_image_2' name="IgniteFormObject.Image1" accept="image/*" enctype="multipart/form-data" />
            </label>
        </div>
    </div>
    <div class="box box_image" id="box_image_2">
        <div class="js--image-preview"></div>
        <div class="upload-options">
            <label>
                <input type="file" class="image-upload" id="image2" data-show='box_image_3' name="IgniteFormObject.Image2" accept="image/*" enctype="multipart/form-data" />
            </label>
        </div>
    </div>
    <div class="box box_image" id="box_image_3">
        <div class="js--image-preview"></div>
        <div class="upload-options">
            <label>
                <input type="file" class="image-upload" id="image3" data-show='box_image_4' name="IgniteFormObject.Image3" accept="image/*" enctype="multipart/form-data" />
            </label>
        </div>
    </div>
    <div class="box box_image" id="box_image_4">
        <div class="js--image-preview"></div>
        <div class="upload-options">
            <label>
                <input type="file" class="image-upload" id="image4" data-show='box_image_5' name="IgniteFormObject.Image4" accept="image/*" enctype="multipart/form-data" />
            </label>
        </div>
    </div>
    <div class="box box_image" id="box_image_5">
        <div class="js--image-preview"></div>
        <div class="upload-options">
            <label>
                <input type="file" class="image-upload" id="image5" name="IgniteFormObject.Image5" accept="image/*" enctype="multipart/form-data" />
            </label>
        </div>
    </div>
</div>

javascript jquery html css

3 commentaires

montrez votre structure de balisage. Cela me semble bizarre, vous avez image1> box2

pouvez-vous publier l'intégralité du code? avec html, j'essaie en fait d'imaginer comment le changement est déclenché

Oui, vous pouvez créer des boucles avec des compteurs et tout cela, mais je pense qu'il existe une manière plus intelligente d'utiliser des sélecteurs, en fonction de votre balisage.

5 Réponses :

0
votes

Le coller en boucle?

for(var i = 1; i <= 4; i++){
    $('#image'+i).change(function (ev) {
        $("#box_image_"+(i+1)).show();
    });

}

2 commentaires

Vous aurez peut-être besoin de parseInt () pour que l'ajout fonctionne.

il vous manque a) - $ ("# box_image_" + (i + 1)). show ();

1
votes

Vous pouvez essayer cette méthode en utilisant la boucle for.

Créer une boucle for
À l'intérieur de la boucle, définissez la fonction change en image $ {i} .
Et dans la fonction change appelez show () sur box_image_${i+1}

J'ai également utilisé Template Literals a> dans mon code

for(let i = 1;i<=4;i++){
   $(`#image${i}`).change(function (ev) {
      $(`#box_image_${i+1}`).show();
   })
}

2 commentaires

c'est une belle ecma :) lurve it!

@brk Non, nous n'avons pas besoin de iife cela fonctionnera bien sans lui. Merci pour l'information

3
votes

Vous pouvez utiliser l'attribut data et le sélecteur multiple. Dans l'attribut data, transmettez le id de l'élément que vous souhaitez afficher et en cas de modification, obtenez cet attribut

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='image1' type='checkbox' data-show='box_image_2'>
<input id='image2' type='checkbox' data-show='box_image_3'>
<input id='image3' type='checkbox' data-show='box_image_4'>
<input id='image4' type='checkbox' data-show='box_image_5'>

$('input[id^="image"]').on('change', function(ev) {
  let toShow = $(this).data('show');
  console.log(toShow);
  // $('#'+toShow).show();
});

Vous pouvez également utiliser le sélecteur de caractères génériques où id commence par image

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='image1' type='checkbox' data-show='box_image_2'>
<input id='image2' type='checkbox' data-show='box_image_3'>
<input id='image3' type='checkbox' data-show='box_image_4'>
<input id='image4' type='checkbox' data-show='box_image_5'>

$('#image1,#image2,#image3,#image4').on('change', function(ev) {
  let toShow = $(this).data('show');
  console.log(toShow);
  // $('#'+toShow).show();
});

4 commentaires

Ça marche! Mais que se passerait-il si j'avais cent images? $ ('# image1, # image2, # image3 ... # image100'). on ('changer', fonction (ev) {

Dans ce cas, utilisez la classe commune et dans jquery, utilisez le sélecteur de classe

Et comment je le ferais avec des identifiants?

id est toujours unique. Vous pouvez utiliser le sélecteur de caractères génériques. Réponse mise à jour

1
votes

Vous pouvez simplement utiliser des classes comme celle-ci:

$('.image').change(function (ev) {
    $(this).next(".box_image").show();
});

0 commentaires

0
votes

Strictement basé sur votre balisage et la façon dont vous aviez des identifiants uniques pour chaque élément ...

La clé est de récupérer cet id du conteneur parent et de l'incrémenter de un pour afficher le suivant.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="box box_image" class="box_image">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
          <input type="file" class="image-upload" name="IgniteFormObject[]" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" class="box_image">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" name="IgniteFormObject[]" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" class="box_image">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" name="IgniteFormObject[]" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" class="box_image">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" name="IgniteFormObject[]" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" class="box_image">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" name="IgniteFormObject[]" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
</div>

// Hide all containers except the first, on load (possibly already achieved via CSS)
$(".box_image").not(":first").hide();

// Change handler
$(".image-upload").change(function(ev) {
  $(this).closest(".box_image").next().show();
});

Mais il pourrait y avoir un autre moyen de faire la même chose plus efficacement ... Comme oublier carrément les identifiants et utiliser les classes ... Jetez un œil à cet autre extrait ci-dessous. ;)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="box box_image" id="box_image_1">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
          <input type="file" class="image-upload" id="image1" data-show='box_image_2' name="IgniteFormObject.Image1" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" id="box_image_2">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" id="image2" data-show='box_image_3' name="IgniteFormObject.Image2" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" id="box_image_3">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" id="image3" data-show='box_image_4' name="IgniteFormObject.Image3" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" id="box_image_4">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" id="image4" data-show='box_image_5' name="IgniteFormObject.Image4" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
  <div class="box box_image" id="box_image_5">
    <div class="js--image-preview"></div>
    <div class="upload-options">
      <label>
        <input type="file" class="image-upload" id="image5" name="IgniteFormObject.Image5" accept="image/*" enctype="multipart/form-data" />
      </label>
    </div>
  </div>
</div>

// Hide all containers except the first, on load (possibly already achieved via CSS)
$("[id^='box_image_']").not(":first").hide();

// Change handler
$("[id^='image']").change(function(ev) {

  // Retreive the index part of the container's id
  var parent_box_image_id = $(this).closest("[id^='box_image_']").attr("id").split("box_image_")[1];
  console.log(parent_box_image_id);
  
  // Increment by one
  parent_box_image_id++;

  // Show the next one!
  $("#box_image_"+parent_box_image_id).show();
});

0 commentaires