Блог

У меня есть слайдер изображения, который показывает до и после изображений, когда пользователь перетаскивает слева направо. Класс ‘draggable’ добавлен к этим изображениям, но также добавлен к изображениям моих героев. Я думаю, что элементы генерируются автоматически, но я не могу найти, как или где (я не создавал это, мне было поручено только исправить это!). Проблема в том, что при перетаскивании ползунка изображения героев также перемещаются взад и вперед. Я не могу понять, как исключить класс ‘draggable’ из моих элементов, в которых находятся изображения моих героев.

 // Call amp; 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");
    });
}
  

[![консоль элемента]

Это то, что генерируется, но не в исходном коде.

 <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>
  

Изначально я пытался просто настроить таргетинг на элемент и удалить класс, но моя переменная не определена.

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

Я здесь в некоторой растерянности. Любой совет был бы с благодарностью принят!! Спасибо!!

Предполагая, что x предоставляет вам элементы, из которых класс должен был быть удален.

 let x = document.getElementsByClassName('slick-list');
x.classList.forEach(elem =>  {
    elem.classList.remove('draggable');
});
  

ОК

 document.getElementsByClassName('slick-list')
  

Предоставляет вам список элементов, если вы хотите изменить один, вам нужно получить доступ к определенному индексу этого массива, поэтому

 x[0].classList.remove('draggable')