Javascript 显示a<；部门>；仅当另一个数据库对象存在时才包含该数据库对象<；部门>；单击包含来自同一行的数据库对象的-Django

我正在开发一个移动理发服务网站。网站上有一个页面显示了该服务上的所有理发师。每个理发师都有一个隐藏的“div”，其中包含他们的预订日历，当他们单击理发师（使用JavaScript）时会显示该日历。预订日历是一个第三方预订系统，我将理发师特定的日历url输入到模型表单中，然后在模板中显示，如下所示：

<iframe class="booking-system" src="{{BarberProfile.booking_link}}" frameBorder="0"></iframe><script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script>

barbers.html

<div class="viewport_content">

        {% for BarberProfile in queryset_list %}

        <div class="booking-div">
            <iframe class="booking-system" src="{{BarberProfile.booking_link}}" frameBorder="0"></iframe><script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script>
        </div>

        <a class="content_box">
            <div class="image_box" style="background-image: url({{BarberProfile.image.url}})">
            </div>
            <div>
                <h4 class="barber_name"> {{BarberProfile.first_name}} </h4>
                <p class="barber_bio"> {{BarberProfile.bio}} </p>
            </div>    
        </a>

        {% endfor %}

</div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="{% static "js/booking.js" %}"></script>

booking.js

$(document).ready(function(){

    $(".content_box").on("click", function(){

        $(".booking-div").toggleClass("open");

    })

});

---

任何帮助都将不胜感激

您可以将js代码放在script标记下，然后这样做

<div class="viewport_content">

        {% for BarberProfile in queryset_list %}

        <div class="booking-div" id="{{BarberProfile.id}}-booking">
            <iframe class="booking-system" src="{{BarberProfile.booking_link}}" frameBorder="0"></iframe><script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script>
        </div>

        <a class="content_box" id="{{BarberProfile.id}}" onClick="toggle_content(this.id)">
            <div class="image_box" style="background-image: url({{BarberProfile.image.url}})">
            </div>
            <div>
                <h4 class="barber_name"> {{BarberProfile.first_name}} </h4>
                <p class="barber_bio"> {{BarberProfile.bio}} </p>
            </div>    
        </a>

        {% endfor %}

</div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script> 
    function toggle_content(clicked_id){ 
        $('#'+clicked_id+'-booking').toggle(); 
      } 
</script>

{queryset_列表%中BarberProfile的%
{{BarberProfile.first{u name}}
{{BarberProfile.bio}
{%endfor%}
函数切换\u内容（单击\u id）{
$（“#”+单击了“id+”-预订”）.toggle（）；
} 

谢谢Sumeet，我如何用CSS设计#{{BarberProfile.id}预订。我需要给#{BarberProfile.id}-booking.open一个100%的高度来显示它。目前，{{BarberProfile.id}-booking.open{height:100%}不起作用。您可以使用类来实现这一点。django标记

{}

不能直接传递给css或javascript。解决您的问题最简单的方法是将css添加到类

.booking div{height:100%}

，然后我需要将JavaScript更改为：

$（“{BarberProfile.id}}-booking”）.toggleClass（“booking-div.open”）正确吗？如果正确，那么正确的代码是什么？因此，您只想在该div打开时添加高度：100%

，对吗？是的，准确地说。该div将隐藏，直到单击理发师。

$(document).ready(function(){

    $(".content_box").on("click", function(){

        $(".booking-div").toggleClass("open");

    })

});

<div class="viewport_content">

        {% for BarberProfile in queryset_list %}

        <div class="booking-div" id="{{BarberProfile.id}}-booking">
            <iframe class="booking-system" src="{{BarberProfile.booking_link}}" frameBorder="0"></iframe><script src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js" type="text/javascript"></script>
        </div>

        <a class="content_box" id="{{BarberProfile.id}}" onClick="toggle_content(this.id)">
            <div class="image_box" style="background-image: url({{BarberProfile.image.url}})">
            </div>
            <div>
                <h4 class="barber_name"> {{BarberProfile.first_name}} </h4>
                <p class="barber_bio"> {{BarberProfile.bio}} </p>
            </div>    
        </a>

        {% endfor %}

</div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script> 
    function toggle_content(clicked_id){ 
        $('#'+clicked_id+'-booking').toggle(); 
      } 
</script>