在 Slick 滑块中单击时切换 class

Question

我试图通过在 'click' 事件上切换 class 来更改 Slick 幻灯片的样式。但由于某些原因，我没有得到正常的行为，即一些幻灯片的样式不会在点击时改变，而是在你水平滚动时改变。

你可以在我的 Github 查看网页：https://bilalarshad24k.github.io/inspocreate/

代码如下：

HTML

    <div class="slickSlider col-sm-12 px-5" dir="ltr">
        <button type="button " class="btn item categItem my-1 ">
            <p>Business</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Empowerment</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Life Style</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Confident</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Fashion</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Office Dress</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Infotainment</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Success</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Women Empowerment</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Women Role</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Supportive Approach</p>
        </button>
        <button type="button " class="btn item categItem my-1 ">
            <p>Society Role</p>
        </button>
    </div>

CSS

    .styleCategItem {
        border: 1px solid #a93a8c;
        background-color: rgba(169, 58, 140, 0.1);
        border-radius: 3px;
        box-shadow: none !important;
    }

    .styleCategItem>p:before {
        content: '\f00c';
        font-family: FontAwesome;
        font-size: 8px;
        margin-right: 5px;
        padding: 1px 3px;
        color: white;
        border-radius: 50%;
        background-color: #a93a8c;
    }
    
    .categItem p {
        display: flex;
        align-items: center;
        margin: auto;
    }

Javascript

    var x = document.querySelectorAll(".categItem");

    for (let i = 0; i < x.length; i++) {
        x[i].addEventListener('click', styleCategItem)
    }

    function styleCategItem(event) {
        event.currentTarget.classList.toggle("styleCategItem")
    }

Answer 1

看起来您正在使用 Slick 选项 infinite: true，它会克隆一些幻灯片并将它们添加到幻灯片的前后，以便在您滚动时无缝换行。如果您检查标记，您可以看到这些带有 class slick-cloned.

的幻灯片

当您单击“原始”幻灯片上的按钮时，它会将 class 添加到该按钮。当 Slick 决定显示克隆的幻灯片时，该幻灯片上的按钮未更改并以旧样式显示。

一个快速的尝试是将每个按钮包裹在 <div> 中，这样 Slick 将把它的 classes 应用到 div 而不是按钮（例如 slick-cloned).这可能允许克隆的幻灯片获取您的内容更改，但我还没有测试它。

如果这不起作用，您可以为每个按钮添加一个唯一的数据属性（例如 data-id="1"、data-id="2" ...），然后将其包含在匹配的克隆幻灯片中.单击后，您可以 select 所有具有匹配数据属性的元素并在其上切换 styleCategItem。类似于：

function styleCategItem(event) {
    var id = event.currentTarget.dataset.id;
    var matches = document.querySelectorAll('[data-id="' + id '"]');

    if (matches) {
        matches.forEach(match => match.classList.toggle("styleCategItem"));
    }
}

在 Slick 滑块中单击时切换 class

Toggling a class on click in Slick slider

javascript

html

css

slick.js