單擊時獲取元素“ 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}}" 

我也設法在onclick上獲得了一個'id'元素，但是我不確定如何將其傳遞給'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和基礎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的類名，但是您可以在情況下切換Disabled標志

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

從這里取