时间戳

首页 > 解决方案 > 仅当在 Django 中使用 JavaScript 单击相应的左/右箭头时才激活特定的“图像滑块”

javascript - 仅当在 Django 中使用 JavaScript 单击相应的左/右箭头时才激活特定的“图像滑块”

问题描述

我正在开发一个 Django 网站，客户可以在该网站上预订移动理发师在自己家中进行预约。

我是 JavaScript 的完全新手，但是，正如您从下面的图片中看到的那样，我已经成功地为“Johanson G”创建了一个工作图像滑块，因此当客户单击他的左箭头或右箭头时，他们可以看到他的发型演示轮廓。

我遇到的问题是：

1) JS 图像滑块代码似乎仅适用于页面上的第一个理发师资料，在本例中为“Johnason G”。如您所见，“William Despard”的图像甚至没有被隐藏，而是显示在他的个人资料图片下方。

2）我不知道如何指定当单击特定理发师配置文件的左箭头或右箭头时，仅激活配置文件图像滑块。例如，我不希望只在一个理发师档案上单击箭头时显示每个理发师的演示图像。我想这个解决方案将包括 {{BarberProfile.id}} 在每个图像和箭头的“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 */
        }

标签： javascripthtmlcss

解决方案

您要做的一件事是有一些方法来区分正在单击的箭头集。我首先将左箭头和右箭头从“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>

诚然，这是您所要求的非常精简的版本。如果您需要进一步澄清，我很乐意提供帮助。

推荐阅读