点击元素'id‘，然后激活相应的’兄弟‘。JS & Django

Question

我正在一个Django网站上工作，客户可以在那里预订移动理发师，以便在自己家里预约。在我们的模型'BarberProfile‘中的所有理发师都可以在我们的/barbers页面上看到(下图)。每个理发师都有一个侧面图像，两边都有一个左右箭头。当这些箭头被点击，我希望特定理发师的发型演示图像出现，而不是他们的个人资料图像，实质上是一个‘图像滑块’。

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

• 我如何防止其他理发师的形象滑块被激活时，特定理发师的箭头被点击？当单击特定的配置文件箭头时，我只希望激活相应的图像滑块。

我几乎100%肯定解决方案在于给每一组箭头，和每个滑块一个独特的'id‘。所以，我给出了这些id的箭头和图像：

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

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

我还成功地获得了一个元素'id‘onclick，但我不确定如何将其传递到'let’document.querySelector，或者这是否是正确的做法。

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

任何帮助都将不胜感激。

profile.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();

profile.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和foundation UI的简单示例。基础UI框架实现可以被忽略，如果您想使app.js函数不那么杂乱地包含我的实现细节/设置，可以将它移到products.html中的脚本标记中。

products.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 %}

base.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>

app.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的类名，但在您的情况下可以切换禁用的标志。

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

取自这里