单击时获取元素“id”，然后激活相应的“兄弟”。 JS＆amp; Django的

时间：2018-05-16 09:33:52

标签： javascript python jquery html django

我正在Django网站上工作，客户可以在自己的家中预约移动理发师预约。我们的模型“BarberProfile”中的所有理发师都可以在我们/理发页面上看到（下图）。每个理发师都有一个轮廓图像，左右两侧各有一个箭头。点击这些箭头后，我想要显示特定的理发师的发型演示图像，而不是他们的个人资料图像，本质上是一个“图像滑块”。

我使用下面的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 %}

enter image description here

1 个答案:

答案 0 :(得分：0)

这是一个使用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;

取自here

相关问题
最新问题