javascript - 从元素中删除不需要的类

Question

我有一个图像滑块，当用户从左向右拖动时，它会显示图像之前和之后的图像。'draggable' 类被添加到这些图像中，但也添加到我的英雄图像中。我认为这些元素是自动生成的，但我找不到如何或在哪里（我没有构建这个，只是负责修复它！）。问题是当滑块被拖动时，英雄图像也会来回拖动。我无法弄清楚如何从我的英雄图像所在的元素中消除“可拖动”类。

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

[![元素控制台]

这是生成的，但不是在源代码中。

<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');

我在这里有点茫然。任何建议将不胜感激！！谢谢！！

标签： javascriptphphtmljquerycss

Answer 1

假设 x 为您提供了必须删除类的元素。

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