0

我正在尝试使用自定义 JS 将多个自动生成的产品滑块从 CMS 集合添加到 Webflow 上的不同页面。每个页面的第一个滑块有效，但第二个无效。

从这里开始阅读，我认为我需要为第二个和第三个滑块创建一个稍微不同的函数，或者将每个实例放入一个数组中，但我对 JS 很陌生，不知道要改变什么。

HTML 代码取自检查元素，因为我无法从 Webflow 导出代码。

非常感谢帮助

这是 Webflow 上的 HTML 和 CSS

JS

<script>
/*  Left/Right Arrow Styling  */
function leftArrowHide() {
    $("#left-arrow").removeClass('arrow-box').addClass('arrow-end');
}

function leftArrowShow() {
    $("#left-arrow").removeClass('arrow-end').addClass('arrow-box');
}

function rightArrowHide() {
    $("#right-arrow").removeClass('arrow-box').addClass('arrow-end');
}

function rightArrowShow() {
    $("#right-arrow").removeClass('arrow-end').addClass('arrow-box');
}
/*  Hide the CMS nav dots used for styling
and set the arrows to default styles for Slide 1  */
$('.navdot').hide();
rightArrowShow();
leftArrowHide();
/*  Generate nav dots for each CMS slide  */
var slideval = 0;
var cmscount = $("#slides").children().length;
var countconverted = (cmscount - 1) * -100;
for (i = 0; i < cmscount; i++) {
    var container = document.getElementById('#nav');
    var div = document.createElement("div");
    div.className = 'navdot';
    div.id = 'slide' + i;
    div.className += ' generated';
    var slidenumber = document.createElement("div");
    slidenumber.innerHTML = i + 1;
    slidenumber.className = 'navdot-number';
    div.append(slidenumber);
    document.getElementById('nav').append(div);
}

/*  Activate the generated nav dot for Slide 1. */
$("#slide0").addClass("selected");

/*  Click detection for nav dots. Activate the corresponding slide 
and update the left/right arrows if on the first or last slide  */
$(".navdot").click(function() {
    $(".navdot").removeClass("selected");
    $(this).addClass("selected");
    var slide = $(this).attr('id');
    var num = slide.replace('slide', '');
    slide = parseInt(num);
    var multiplier = slide * -100;
    slideval = multiplier;
    if (slide == 0) {
        leftArrowHide();
        rightArrowShow();
    } else if (slide == cmscount - 1) {
        rightArrowHide();
        leftArrowShow();
    } else {
        leftArrowShow();
        rightArrowShow();
    }
    moveSlides(slideval);
    $('#animationTrigger').click();
});

/*  Right Arrow click detection and actions. */
$("#right-arrow").click(function() {
    if (slideval > countconverted) {
        leftArrowShow();
        slideval += -100;
        moveSlides(slideval);
        updatenav();
        $('#animationTrigger').click();
        if (slideval == countconverted) {
            rightArrowHide();
        }
    }
});
/*  Left Arrow click detection and actions. */
$("#left-arrow").click(function() {
    if (slideval < 0) {
        rightArrowShow();
        slideval += 100;
        moveSlides(slideval);
        updatenav();
        $('#animationTrigger').click();
        if (slideval == 0) {
            leftArrowHide();
        }
    }
});
/*  Function called on by arrow and nav dot clicks to move to
the selected slide  */
function moveSlides(measurement) {
    $('#slides').css({
        '-webkit-transform': 'translateX(' + slideval + '%)',
        '-moz-transform': 'translateX(' + slideval + '%)',
        '-ms-transform': 'translateX(' + slideval + '%)',
        '-o-transform': 'translateX(' + slideval + '%)',
        'transform': 'translateX(' + slideval + '%)'
    });
}
/*  Update nav dots so that the active dot corresponds to the 
active slide  */
function updatenav() {
    $(".navdot").removeClass("selected");
    var slides = $('.generated');
    for (i = 0; i < slides.length; i++) {
        var slide = slides[i].id;
        var num = slide.replace('slide', '');
        slide = parseInt(num);
        var multiplier = slide * -100;
        if (multiplier == slideval) {
            $("#slide" + i).addClass("selected");
        }
    }
} 
</script>

CSS
 .slider-container {
        background-color: transparent;
      }
      .navdot-number {
        color: #000;
      }
      .arrow-end {
        color: #000;
      }
      .arrow {
        border-color: #000;
      }
      .navdot {
        border-color: #000;
      }
      .image-11 {
        height: 100%;
      }
      .product-slide-wrapper {
        padding-top: 100px;
        padding-bottom: 100px;
      }
    }

.arrow-container {
      position: absolute;
      left: 0%;
      top: 0%;
      right: 0%;
      bottom: 0%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

滑块 1 的 HTML

<div class="slider-container">
<div class="arrow-container">
<div id="left-arrow" data-w-id="c0dde25c-5f11-4f92-00cf-87e1df766fdb" class="arrow-end">
<div class="arrow">
<img src="https://uploads-ssl.webflow.com/5ee34a47f5f3055b3c5c6b1c/5ee34a47dc55146960c794d0_Asset%201arrow_white.svg" alt="" class="image-10"></div></div>
<div id="right-arrow" data-w-id="c0dde25c-5f11-4f92-00cf-87e1df766fde" class="arrow-box">
<div class="arrow">
<img src="https://uploads-ssl.webflow.com/5ee34a47f5f3055b3c5c6b1c/5ee34a47dc55146960c794d0_Asset%201arrow_white.svg" alt="" class="image-1"></div></div></div><div class="collection-list-wrapper-2 w-dyn-list"><div id="slides" role="list" class="collection-list-7 w-dyn-items"><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://www.revolve.com/astr-the-label-sonnet-dress/dp/ASTR-WD131/?d=Womens&amp;page=1&amp;lc=6&amp;itrownum=2&amp;itcurrpage=1&amp;itview=05" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef111bb51496881a8f415f3_ASTR-WD131_V1.jpg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef111bb51496881a8f415f3_ASTR-WD131_V1-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef111bb51496881a8f415f3_ASTR-WD131_V1-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef111bb51496881a8f415f3_ASTR-WD131_V1.jpg 960w" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://shop.nordstrom.com/s/nike-air-force-1-shadow-sneaker-women/5274385?origin=coordinating-5274385-0-1-PDP_1-recbot-visually_similar_type2_no_dresses&amp;recs_placement=PDP_1&amp;recs_strategy=visually_similar_type2_no_dresses&amp;recs_source=recbot&amp;recs_page_type=product&amp;recs_seed=3458988&amp;color=WHITE%2F%20WHITE%2F%20WHITE" class="link-block-5 w-inline-block">
<img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef10f19b93a055b3ecd3388_0d8b1a67-edcf-4601-91b0-af40acf25215.jpeg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef10f19b93a055b3ecd3388_0d8b1a67-edcf-4601-91b0-af40acf25215-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef10f19b93a055b3ecd3388_0d8b1a67-edcf-4601-91b0-af40acf25215-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef10f19b93a055b3ecd3388_0d8b1a67-edcf-4601-91b0-af40acf25215-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ef10f19b93a055b3ecd3388_0d8b1a67-edcf-4601-91b0-af40acf25215.jpeg 1560w" class="image-11"></a></div></div></div>
<div id="nav" class="nav">
<div class="navdot selected" style="display: none;">
<div class="navdot-number">1</div></div>
<div class="navdot" style="display: none;"><div class="navdot-number">1</div></div>
<div class="navdot generated selected" id="slide0" style="display: none;"><div class="navdot-number">1</div></div>
<div class="navdot generated" id="slide1" style="display: none;">
<div class="navdot-number">2</div></div>
<div class="navdot generated" id="slide0" style="display: none;">
<div class="navdot-number">1</div></div><div class="navdot generated" id="slide1" style="display: none;"><div class="navdot-number">2</div></div>
<div class="navdot generated" id="slide0"><div class="navdot-number">1</div></div>
<div class="navdot generated" id="slide1">
<div class="navdot-number">2</div></div></div></div>

滑块 2 的 HTML

<div class="slider-container">
<div class="arrow-container">
<div id="left-arrow" data-w-id="7ae1b364-94b2-034e-386f-77eacfb86758" class="arrow-box">
<div class="arrow">
<img src="https://uploads-ssl.webflow.com/5ee34a47f5f3055b3c5c6b1c/5ee34a47dc55146960c794d0_Asset%201arrow_white.svg" alt="" class="image-10"></div></div>
<div id="right-arrow" data-w-id="7ae1b364-94b2-034e-386f-77eacfb8675b" class="arrow-end"><div class="arrow"><img src="https://uploads-ssl.webflow.com/5ee34a47f5f3055b3c5c6b1c/5ee34a47dc55146960c794d0_Asset%201arrow_white.svg" alt="" class="image-1"></div></div></div>
<div class="collection-list-wrapper-2 w-dyn-list">
<div id="slides" role="list" class="collection-list-7 w-dyn-items">
<div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://www.revolve.com/sachajuan-hair-mousse/dp/SAHR-WU14/?d=Womens&amp;_cclid=Google_CjwKCAjwiMj2BRBFEiwAYfTbClKooWZdyyJG_1JGnbhQ0ZFHY1vYWiZc-gG9xEhcDeHtMeEKgVES5BoCzVYQAvD_BwE&amp;countrycode=US&amp;gclid=CjwKCAjwiMj2BRBFEiwAYfTbClKooWZdyyJG_1JGnbhQ0ZFHY1vYWiZc-gG9xEhcDeHtMeEKgVES5BoCzVYQAvD_BwE" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68a21bf550172a1e8151e_SAHR-WU14_V1.jpg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68a21bf550172a1e8151e_SAHR-WU14_V1-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68a21bf550172a1e8151e_SAHR-WU14_V1-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68a21bf550172a1e8151e_SAHR-WU14_V1.jpg 960w" class="image-11"></a></div>
<div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://www.randco.com/outer-space-working-hairspray.html" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed689d049f4936b10c9eb86_E30014015056000-3952706688.jpg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed689d049f4936b10c9eb86_E30014015056000-3952706688-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed689d049f4936b10c9eb86_E30014015056000-3952706688-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed689d049f4936b10c9eb86_E30014015056000-3952706688-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed689d049f4936b10c9eb86_E30014015056000-3952706688.jpg 1536w" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://bluemercury.com/products/oribe-gel-serum?variant=26187316806" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68961023d8e7496a5b8d5_23e2f925-1537-417e-9292-2023db7f3b16.jpeg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68961023d8e7496a5b8d5_23e2f925-1537-417e-9292-2023db7f3b16-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed68961023d8e7496a5b8d5_23e2f925-1537-417e-9292-2023db7f3b16.jpeg 780w" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://us.davines.com/collections/all-products/products/oi-oil" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6773f782d07450dab47aa_76000_OI_Oil_135ml_Davines_2000x.jpg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6773f782d07450dab47aa_76000_OI_Oil_135ml_Davines_2000x-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6773f782d07450dab47aa_76000_OI_Oil_135ml_Davines_2000x-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6773f782d07450dab47aa_76000_OI_Oil_135ml_Davines_2000x-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6773f782d07450dab47aa_76000_OI_Oil_135ml_Davines_2000x.jpg 1200w" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://www.randco.com/motorcycle-flexible-gel" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6783c9ce76839126ca58c_motorcycle-pdp.png" alt="" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://www.sephora.com/product/perfect-hair-day-phd-dry-shampoo-P399330" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6799d7720b92d58a6cd6f_s2343051-main-zoom.jpg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6799d7720b92d58a6cd6f_s2343051-main-zoom-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6799d7720b92d58a6cd6f_s2343051-main-zoom-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6799d7720b92d58a6cd6f_s2343051-main-zoom-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed6799d7720b92d58a6cd6f_s2343051-main-zoom.jpg 1500w" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://mr-smith.com.au/product/mousse/?v=3a1ed7090bfa" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679bc16a79a6097df01e7_Screen%20Shot%202020-05-30%20at%205.58.20%20PM.png" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679bc16a79a6097df01e7_Screen%20Shot%202020-05-30%20at%205.58.20%20PM-p-500.png 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679bc16a79a6097df01e7_Screen%20Shot%202020-05-30%20at%205.58.20%20PM-p-800.png 800w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679bc16a79a6097df01e7_Screen%20Shot%202020-05-30%20at%205.58.20%20PM.png 911w" class="image-11"></a></div><div role="listitem" class="collection-item-6 w-dyn-item"><a href="https://shop.nordstrom.com/s/oribe-dry-texturizing-spray/4511005" class="link-block-5 w-inline-block"><img src="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679f8d0eb7757d18e4907_9f440288-4d4e-4536-8576-91d11f38d562.jpeg" alt="" sizes="100vw" srcset="https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679f8d0eb7757d18e4907_9f440288-4d4e-4536-8576-91d11f38d562-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5eaea74b29a4a6770490a38b/5ed679f8d0eb7757d18e4907_9f440288-4d4e-4536-8576-91d11f38d562.jpeg 1560w" class="image-11"></a></div></div></div>
<div id="nav" class="nav">
<div class="navdot selected" style="display: none;">
<div class="navdot-number">1</div></div>
<div class="navdot" style="display: none;">
<div class="navdot-number">1</div></div></div></div>
4

1 回答 1

0

id字段在 DOM 中必须是唯一的。

在这个简化的示例中，取自您的代码，只有具有相同 id 的第一个元素将被着色为红色。

var nav = document.getElementById('nav');
nav.style.backgroundColor = "red";
<div id="nav">nav 1</div>
<div id="nav">nav 2</div>

此外，正确的语法是getElementById('id')元素id="id"没有的地方#

于 2020-06-23T10:17:00.693 回答