单击时获取元素“id”，然后激活相应的“同级”。JS和Djang

Question

我在Django的一个网站上工作，顾客可以在自己家里预约移动理发师。我们的“理发师简介”模型中的所有理发师都可以在我们的/理发师页面上看到（下图）。每个理发师都有一个侧面图像，两侧各有一个左右箭头。单击这些箭头时，我希望显示特定理发师的理发演示图像，而不是他们的个人资料图像，本质上是一个“图像滑块”。你知道吗

我已经成功地使用下面的JS代码制作了一个图像滑块(简介.js). 但是，我现在有个问题：

• 如何防止在单击特定的理发师箭头时激活其他理发师图像滑块？当一个特定的配置文件箭头被单击时，我只希望相应的图像滑块被激活。你知道吗

我几乎100%确信解决方案在于给每一组箭头和每个滑块一个唯一的“id”。所以，我给了箭头和图像这些id：

id="arrow-left-{{BarberProfile.id}}"
id="arrow-right-{{BarberProfile.id}}"

id="slide-{{BarberProfile.id}}" 

我还设法得到一个元素'id'onclick，但我不知道如何将它传递到'let'文档.查询选择器或者如果这是正确的做法。你知道吗

function printID(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    console.log("ID: " + e.id);
}

任何帮助都将不胜感激。你知道吗

你知道吗简介.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你知道吗

{% for BarberProfile in queryset_list %}

    <div onclick="printID(this.id);"> <!-- for JS on click id identification -->
        <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-{{BarberProfile.id}}" class="arrow-left" style="pointer-events: auto;" src="{% static "img/arrow-2.svg" %}" alt="Mobile menu arrow">
                    <img id="arrow-right-{{BarberProfile.id}}" class="arrow-right" 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="slide-{{BarberProfile.id}}" class="image slide slide1 border-radius-2 shadow" style="background-image: url({{BarberProfile.image.url}})">
                    <div id="image-structure"></div>
                </div>
                <div id="slide-{{BarberProfile.id}}" class="image slide slide2 border-radius-2 shadow" style="background-image: url({{BarberProfile.image_1.url}})">
                    <div id="image-structure"></div>
                </div>
                <div id="slide-{{BarberProfile.id}}" class="image 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>
    </div>

{% endfor %}

Answer 1

这是一个使用Django 2和FuffueUI的简单例子。可以忽略基础UI框架的实现和应用程序.js函数可以移动到中的脚本标记产品.html如果你想让我的实现细节/设置不那么混乱的话。你知道吗

你知道吗产品.html你知道吗

{% extends "base.html" %}
{% block content %}

<ul class="accordion" data-accordion>
{% for product in products %}

  <li class="accordion-item is-active" data-accordion-item>
      <!  Accordion tab title  >
      <a href="#" class="accordion-title">
        <span class="line-heading">Name:</span> {{ product.name }}
        <span class="line-heading">Price:</span> {{ product.price }}
        <span class="line-heading">Total Cumulative Donations: </span> {{ product.total_amount_paid }}
        <span class="line-heading">Feature Area:</span> {{ product.product_area }}
      </a>

      <!  Accordion tab content: it would start in the open state due to using the `is-active` state class.  >
      <div class="accordion-content" data-tab-content>
        <table class="stack product-table">
          <tbody>
            <tr>
              <td class="test1234">
                <div data-id="{{product.id}}" class="image-detail" onclick="toggleFullSize(this)">
                  <img class="thumbnail-image-line-detail" src="url('{{ MEDIA_URL }}{{ product.image }}">
                </div>
                <div class="detail-paragraph">
                  <font class="description-heading">Description</font>
                  <br>
                  <br>
                  <font class="description-text">{{ product.description }}</font>
                </div>
              </td>


              <td>
                <p></p>
                <form method="post" action="{% url 'add_to_cart' product.id %}">
                  {% csrf_token %}
                  <fieldset class="fieldset" style="background-color:grey border">
                    <legend>Donate to fund work</legend>
                    <div class="input-group">
                      <input name='quantity' type="number" min="1" max="999" class="form-control input-group-field" placeholder="Quantity">
                      <div class="input-group-button">
                        <input type="submit" class="button" value="Add">
                      </div>
                    </div>
                  </fieldset>
                </form>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </li>

{% endfor %}
</ul>

{% endblock %}

你知道吗基本.html你知道吗

<html class="no-js">

<head>
    <title>{% block page_title %}{% endblock %}</title>
    {% load static %}
    <link rel='stylesheet' href="{% static 'css/foundation.css' %}" type='text/css' />
    <link rel='stylesheet' href="{% static 'css/app.css' %}" type='text/css' />
</head>

<body>
    <h1>
        {% block page_heading %}{% endblock %}
    </h1>

    <nav>
        <ul>
            {% if user.is_authenticated %}
            <li class="navigation-link"><a href="{% url 'profile' %}">Profile</a></li>
            <li class="navigation-link"><a href="{% url 'logout' %}">Logout</a></li>
            <li class="navigation-link"><a href="{% url 'products' %}">Features & Issues</a></li>
            {% else %}
            <li class="navigation-link"><a href="{% url 'login' %}">Login</a></li>
            <li class="navigation-link"><a href="{% url 'registration' %}">Register</a></li>
            <li class="navigation-link"><a href="{% url 'products' %}">Features & Issues</a></li>
            {% endif %}
        </ul>
    </nav>

    <hr> {% if messages %}
    <div>
        {% for message in messages %} {{ message }} {% endfor %}
    </div>
    {% endif %} {% block content %}{% endblock %}

    <script src="{% static 'js/vendor/jquery.js' %}"></script>
    <script src="{% static 'js/vendor/foundation.js' %}"></script>
    <script src="{% static 'js/vendor/what-input.js' %}"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>

</html>

你知道吗应用程序.js（第一行初始化基础页元素）

$(document).foundation()

function toggleFullSize(element){
  element.classList.toggle('image-detail-full-size');
  // alert(element.childNodes[1].className);
  alert(element.parentNode.childNodes[3].className);
}

函数将获取触发单击的元素，找到父级，然后收集父级的子级，并在我的例子中获取下一个div的类名，但是您可以在自己的例子中切换disabled标志

element.parentNode.childNodes[3].disabled = true;

取自here