僅當使用Django中的JavaScript單擊相應的左/右箭頭時，才激活特定的“圖像滑塊”

Question

我正在Django網站上工作，客戶可以在該網站上預訂移動理發店以便在家中預約。

我是JavaScript的新手，但是，正如您從下面的圖片中可以看到的那樣，我已經成功地為“ Johanson G”創建了一個有效的圖片滑塊，以便客戶在單擊其左或右箭頭時可以看到其發型的演示。輪廓。

我遇到的問題是：

1）JS圖像滑塊代碼似乎僅適用於頁面上的第一個理發師資料，在本例中為“ Johnason G”。 如您所見，“ William Despard”的圖像甚至沒有被隱藏，而是顯示在他的個人資料圖片下方。

2）我不知道如何指定當單擊特定理發師配置文件的左箭頭或右箭頭時，僅激活“那個”配置文件圖像滑塊。 例如，我不希望僅在一個理發師資料上單擊箭頭就顯示每個理發師的演示圖像。 我想解決方案將在每個圖像和箭頭的“ id”中包含{{BarberProfile.id}}，然后以某種方式創建一個規則，當單擊箭頭時，僅激活相應的滑塊？

任何幫助或見解將不勝感激。 但是，請記住我是JS的完整入門者，因此請在您的答案中進行詳細說明，不要以為我什么都不知道！

JS代碼：

let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

//clear all images
function reset(){
    for(let i = 0; i < sliderImages.length; i++){
        sliderImages[i].style.display = 'none';
    }
}

//initialises slider
function startSlide(){
    reset();
    sliderImages[0].style.display = 'block';
}

//show prev
function slideLeft(){
    reset();
    sliderImages[current - 1].style.display = 'block';
    current--;
}

//show next
function slideRight(){
    reset();
    sliderImages[current + 1].style.display = 'block';
    current++;
}

//left arrow clicked
arrowLeft.addEventListener('click', function(){
    if(current === 0){
        current = sliderImages.length;
    }
    slideLeft();
});

//right arrow clicked
arrowRight.addEventListener('click', function(){
    if(current === sliderImages.length - 1){
        current = - 1;
    }
    slideRight();
});

startSlide();

HTML：

<div id="total-div" class="margin-left-1 margin-right-1 margin-top-2 margin-bottom-2">

    <div style="width:50%;position:absolute;left: 50%;transform: translateX(-50%);z-index:1;pointer-events: none">
        <div style="padding-top: 100%;">
            <img id="arrow-left" class="arrow" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow">
            <img id="arrow-right" class="arrow" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow">
        </div>
    </div>


    <a class="profile-div" id="{{BarberProfile.id}} profile-div" target="{{BarberProfile.booking_link}}" onClick="toggle_content(this.id)">

        <!-- images -->
        <div id="image" class="slide slide1 border-radius-2 shadow" style="background-image: url({{BarberProfile.image.url}})">
            <div id="image-structure"></div>
        </div>
        <div id="image" class="slide slide2 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_1.url}})">
            <div id="image-structure"></div>
        </div>
        <div id="image" class="slide slide3 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_2.url}})">
            <div id="image-structure"></div>
        </div>
        <!-- images -->

        <h4 class="color-1 margin-top-2-lh margin-bottom-2-lh">{{BarberProfile.first_name}} {{BarberProfile.last_name}}</h4>
        <p class="color-4"> {{BarberProfile.bio}} </p>
        <div>
            <div id="text-div">
                <img id="text-image" class="margin-top-2" src="{% static "img/experience.svg" %}" alt="Mobile barber or hairdresser experience icon">
                <p id="text" class="color-4 margin-top-2">{{BarberProfile.years_of_experience}}</p>
            </div>
        </div>
        <div>
            <div id="text-div">
                <img id="text-image" class="margin-top-1" src="{% static "img/scissors.svg" %}" alt="Mobile barber or hairdresser experience icon">
                <p id="text" class="color-4 margin-top-1">{{BarberProfile.types}}</p>
            </div>
        </div>
    </a>

</div>

CSS：

#arrow-left{
    width: 25px;
    position: absolute;
    margin-top: -12.5px;
    top: 50%;
    left: -37.5px;
    transform: rotate(90deg);
    cursor: pointer;
}

#arrow-right{
    width: 25px;
    position: absolute;
    margin-top: -12.5px;
    top: 50%;
    right: -37.5px;
    transform: rotate(270deg);
    cursor: pointer;
}

#total-div{
    position: relative;
    cursor: pointer; /* turns mouse into pointer on hover*/
}
    #image{
        background-size: cover; /* makes barber image div background */
        border-radius: 50%; /* makes barber image circular */
        width: 50%;
        margin: auto;
    }
        #image-structure{
            padding-top: 100%; /* makes barber image height and width the same on size change */
        }
    #text-div{
        display:inline-block;
    }
        #text-image{
            height: 23.75px; /* same height as <p> line-height */
            float: left; /* keeps img on same line as <p> */
        }
        #text{
            margin-left: 33.125px; /* gives 12.5px space to the left */
        }

Answer 1

您要做的一件事情是使用某種方法來區分單擊了哪組箭頭。 我將先從“ id”向“ class”移動左箭頭和右箭頭。 通常，最好的做法是使用任何類型的標識符（不止一次使用）作為類而不是ID。

 $('.arrow').bind('click', function(){ $(this).siblings('.slide').html('clicked'); }) 

 .slider-container { display: flex; justify-content: space-around; } #slider-1 { background-color: red; } #slider-2 { background-color: blue; } .arrow { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider-1" class="slider-container"> <div class="arrow arrow--left"> LEFT </div> <div class="slide"> 1 </div> <div class="arrow arrow--right"> RIGHT </div> </div> <div id="slider-2" class="slider-container"> <div class="arrow arrow--left"> LEFT </div> <div class="slide"> 1 </div> <div class="arrow arrow--right"> RIGHT </div> </div> 

誠然，這是您所要求的精簡版本。 如果您需要進一步的說明，我們將很樂意為您提供幫助。