J'ai un curseur d'image qui montre les images avant et après lorsque l'utilisateur fait glisser de gauche à droite. La classe «draggable» est ajoutée à ces images, mais également ajoutée à mes images de héros. Je pense que les éléments sont générés automatiquement, mais je ne peux pas trouver comment ni où (je n'ai pas construit ceci, seulement chargé de le réparer!). Le problème est que lorsque le curseur est déplacé, les images de héros se déplacent également d'avant en arrière. Je ne peux pas comprendre comment éliminer la classe `` draggable '' de mes éléments dans lesquels se trouvent les images de mon héros.

// Call & init

$(document).ready(function () {
  $(".ba-slider").each(function () {
    var cur = $(this);
    // Adjust the slider
    var width = cur.width() + "px";
    cur.find(".resize img").css("width", width);
    // Bind dragging events
    drags(cur.find(".handle"), cur.find(".resize"), cur);
  });
});

// Update sliders on resize.
// Because we all do this: i.imgur.com/YkbaV.gif
$(window).resize(function () {
  $(".ba-slider").each(function () {
    var cur = $(this);
    var width = cur.width() + "px";
    cur.find(".resize img").css("width", width);
  });
});

function drags(dragElement, resizeElement, container) {
  // Initialize the dragging event on mousedown.
  dragElement
    .on("mousedown touchstart", function (e) {
      dragElement.addClass("draggable");
      resizeElement.addClass("resizable");

      // Check if it's a mouse or touch event and pass along the correct value
      var startX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;

      // Get the initial position
      var dragWidth = dragElement.outerWidth(),
        posX = dragElement.offset().left + dragWidth - startX,
        containerOffset = container.offset().left,
        containerWidth = container.outerWidth();

      // Set limits
      minLeft = containerOffset + 10;
      maxLeft = containerOffset + containerWidth - dragWidth - 10;

      // Calculate the dragging distance on mousemove.
      dragElement
        .parents()
        .on("mousemove touchmove", function (e) {
          // Check if it's a mouse or touch event and pass along the correct value
          var moveX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;

          leftValue = moveX + posX - dragWidth;

          // Prevent going off limits
          if (leftValue < minLeft) {
            leftValue = minLeft;
          } else if (leftValue > maxLeft) {
            leftValue = maxLeft;
          }

          // Translate the handle's left value to masked divs width.
          widthValue =
            ((leftValue + dragWidth / 2 - containerOffset) * 100) /
              containerWidth +
            "%";

          // Set the new values for the slider and the handle.
          // Bind mouseup events to stop dragging.
          $(".draggable")
            .css("left", widthValue)
            .on("mouseup touchend touchcancel", function () {
              $(this).removeClass("draggable");
              resizeElement.removeClass("resizable");
            });
          $(".resizable").css("width", widthValue);
        })
        .on("mouseup touchend touchcancel", function () {
          dragElement.removeClass("draggable");
          resizeElement.removeClass("resizable");
        });
      e.preventDefault();
    })
    .on("mouseup touchend touchcancel", function (e) {
      dragElement.removeClass("draggable");
      resizeElement.removeClass("resizable");
    });
}

[! [console d'élément]

entrez la description de l'image ici C'est ce qui est généré, mais pas dans le code source.

<section class="intro-section">
                        <div class="frame">
                            <?php if( have_rows('intro_slide') ): ?>
                            <div class="intro-slider slick-slider">
                                <?php while( have_rows('intro_slide') ): the_row();
                                $title = get_sub_field('title') ? get_sub_field('title') : get_the_title();
                                $text = get_sub_field('text');
                                $image = get_sub_field('image');
                                $image2 = get_sub_field('logo');
                                $icon = get_sub_field('note_icon');
                                $number = get_sub_field('note_number');
                                $note = get_sub_field('note_text');
                                ?>
                                <div class="slide bg-stretch"<?php if($image): ?> style="background-image: url(<?php echo $image['url']; ?>);"<?php endif; ?>>
                                    <div class="container-wrap">
                                    <?php if($image2): ?><div class="logo"><img src="<?php echo $image2['url']; ?>" width="227" alt="<?php bloginfo( 'name' ); ?>"></div><?php endif; ?>
                                    <div class="text-overlay">
                                        <?php if($title): ?><h1 class="h2"><?php echo $title; ?></h1><?php endif; ?>
                                        <div class="text-block">
                                            <?php echo $text; ?>
                                        </div>
                                    </div>

Au départ, j'ai essayé de cibler simplement l'élément et de supprimer la classe, mais ma variable n'est pas définie.

let x = document.getElementsByClassName('slick-list');
x.classList.remove('draggable');

Je suis un peu perdu ici. Tout avis serait grandement apprécié!! Merci!!

1
RRhodes 21 août 2020 à 22:21

2 réponses

Meilleure réponse

En supposant que le x déliever vous les éléments où la classe a dû être supprimée.

let x = document.getElementsByClassName('slick-list');
x.classList.forEach(elem =>  {
    elem.classList.remove('draggable');
});
1
Sascha 21 août 2020 à 19:29

D'accord

document.getElementsByClassName('slick-list')

Vous donne une liste d'éléments, si vous voulez en changer un, vous devez accéder à un index particulier de ce tableau, donc

x[0].classList.remove('draggable')
0
bluejayke 21 août 2020 à 19:29