时间戳

首页 > 解决方案 > 如何使用 JavaScript 根据 id 更改 svg 路径的颜色？

javascript - 如何使用 JavaScript 根据 id 更改 svg 路径的颜色？

问题描述

我正在使用 Flask 创建一个 Web 应用程序。这是预订座位的预订系统。我拥有的 html 模板之一是座位计划，其中座位应该是红色/绿色/灰色。默认情况下，它们是灰色的。如果它们被保留（来自数据库的信息：当天占用的座位 ID），它们应该在加载时变成红色 - 但它们不会。我怀疑我的错误出在我的 JS 代码中，但由于复杂性，这里是相关代码。

烧瓶/Python：

@app.route("/seating", methods=["GET", "POST"])
@login_required
def seating():
    if request.method == "GET":
        today = datetime.datetime.today().strftime('%Y-%m-%d')
        today_int = innumber(today)
        ids = db.execute("SELECT seat_id FROM bookings INNER JOIN seats ON bookings.seat_id = seats.id WHERE start_date_int <= ? AND end_date_int >= ?", today_int, today_int)
            
        return render_template("seating.html", today = today, ids = ids)

座位.html：

{% block title %}
    Seating
{% endblock %}

{% block main %}

<p>
    <h3>Seating</h3>
</p>

<!--Select the day-->
<form action="/seating" method="post">
    <div class="form-group">
        <label for="day" class="form-label">Select the day:</label>
        <input class="form-control" type="date" id="day" name="day" autocomplete="on" selected value = "{{ today }}" placeholder = "{{ today }}">
        <button class="btn btn-outline-dark" type="submit">Submit</button>
    </div>

    
<div id = "takenseats" value = ""> {{ ids }} </div>


{% for id in ids %} <!--just to check if ids gets through-->
{% endfor %}

<!--SVG-->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1193 715" style="enable-background:new 0 0 1193 715;" xml:space="preserve">

<path id="1" class="st0" d="M68.78,90.32v-5.47l0.65-2.73v-2.87l-0.65-2.73l-1.43-1.3h-2.08l-1.95,1.3l-1.43,1.43l-0.65,2.08
    l-0.65,3.39v3.39l-0.78,4.82v5.6l0.78,8.86l0.65,6.9l2.08,4.17l0.65,0.65l1.3,0.65l2.08-0.65l1.43-1.43l0.65-2.73l-0.65-4.82v-5.47
    h4.17v5.47l0.65,2.73l1.3,2.73l2.08,1.43l2.08,0.65h5.47v4.17h-5.47l-2.08,1.3l-0.65,1.43l-0.65,2.08l0.65,1.3l0.65,1.43l0.65,0.65
    l1.43,0.65h4.82h15.11l1.43-0.65l0.65-0.65l1.3-1.43v-1.3v-2.08l-1.3-1.43l-2.08-1.3h-6.25v-4.17h2.87l1.95-0.65l2.86-0.65
    l4.04-4.17l2.73-5.47l1.43-8.2l-1.43-8.99l-2.73-6.12l-4.04-3.52l-4.82-1.3h-2.87v-4.17h6.25l1.43-0.65l0.65-0.78l1.3-1.3v-2.08
    v-1.43l-1.3-1.3l-0.65-1.43h-1.43H83.89h-4.82h-1.43l-0.65,1.43l-0.65,1.3l-0.65,1.43l0.65,2.08l0.65,1.3l0.65,0.78l1.43,0.65h5.47
    v4.17h-5.47l-2.08,0.65l-2.08,1.3l-1.3,2.87l-0.65,2.73v5.47L68.78,90.32L68.78,90.32z M84.54,116.37h8.2H84.54z M92.74,120.54h-8.2
    H92.74z M84.54,73.13h8.2H84.54z M92.74,77.3h-8.2H92.74z M68.78,103.34V90.32C68.78,90.32,68.78,103.34,68.78,103.34z M72.95,90.32
    v13.02V90.32z"/>
<path id="2" class="st0" d="M68.78,189.54v-5.47l0.65-2.73v-2.87l-0.65-2.73l-1.43-1.3h-2.08l-1.95,1.3l-1.43,1.43
    l-0.65,2.08l-0.65,3.39v3.39l-0.78,4.82v5.6l0.78,8.86l0.65,6.9l2.08,4.17l0.65,0.65l1.3,0.65l2.08-0.65l1.43-1.43l0.65-2.73
    l-0.65-4.82v-5.47h4.17v5.47l0.65,2.73l1.3,2.73l2.08,1.43l2.08,0.65h5.47v4.17h-5.47l-2.08,1.3l-0.65,1.43l-0.65,2.08l0.65,1.3
    l0.65,1.43l0.65,0.65l1.43,0.65h4.82h15.11l1.43-0.65l0.65-0.65l1.3-1.43v-1.3v-2.08l-1.3-1.43l-2.08-1.3h-6.25v-4.17h2.87
    l1.95-0.65l2.86-0.65l4.04-4.17l2.73-5.47l1.43-8.2l-1.43-8.99l-2.73-6.12l-4.04-3.52l-4.82-1.3h-2.87v-4.17h6.25l1.43-0.65
    l0.65-0.78l1.3-1.3v-2.08v-1.43l-1.3-1.3l-0.65-1.43h-1.43H83.89h-4.82h-1.43l-0.65,1.43l-0.65,1.3l-0.65,1.43l0.65,2.08l0.65,1.3
    l0.65,0.78l1.43,0.65h5.47v4.17h-5.47l-2.08,0.65l-2.08,1.3l-1.3,2.87l-0.65,2.73v5.47L68.78,189.54L68.78,189.54z M84.54,215.59
    h8.2H84.54z M92.74,219.76h-8.2H92.74z M84.54,172.35h8.2H84.54z M92.74,176.52h-8.2H92.74z M68.78,202.57v-13.02
    C68.78,189.54,68.78,202.57,68.78,202.57z M72.95,189.54v13.02V189.54z"/>
<path id="Vienna_3" class="st0" d="M68.78,288.76v-5.47l0.65-2.73v-2.87l-0.65-2.73l-1.43-1.3h-2.08l-1.95,1.3l-1.43,1.43
    l-0.65,2.08l-0.65,3.39v3.39l-0.78,4.82v5.6l0.78,8.86l0.65,6.9l2.08,4.17l0.65,0.65l1.3,0.65l2.08-0.65l1.43-1.43l0.65-2.73
    l-0.65-4.82v-5.47h4.17v5.47l0.65,2.73l1.3,2.73l2.08,1.43l2.08,0.65h5.47v4.17h-5.47l-2.08,1.3l-0.65,1.43l-0.65,2.08l0.65,1.3
    l0.65,1.43l0.65,0.65l1.43,0.65h4.82h15.11l1.43-0.65l0.65-0.65l1.3-1.43v-1.3v-2.08l-1.3-1.43l-2.08-1.3h-6.25v-4.17h2.87
    l1.95-0.65l2.86-0.65l4.04-4.17l2.73-5.47l1.43-8.2l-1.43-8.99l-2.73-6.12l-4.04-3.52l-4.82-1.3h-2.87v-4.17h6.25l1.43-0.65
    l0.65-0.78l1.3-1.3v-2.08v-1.43l-1.3-1.3l-0.65-1.43h-1.43H83.89h-4.82h-1.43l-0.65,1.43l-0.65,1.3l-0.65,1.43l0.65,2.08l0.65,1.3
    l0.65,0.78l1.43,0.65h5.47v4.17h-5.47l-2.08,0.65l-2.08,1.3l-1.3,2.87l-0.65,2.73v5.47L68.78,288.76L68.78,288.76z M84.54,314.81
    h8.2H84.54z M92.74,318.98h-8.2H92.74z M84.54,271.57h8.2H84.54z M92.74,275.74h-8.2H92.74z M68.78,301.79v-13.02
    C68.78,288.76,68.78,301.79,68.78,301.79z M72.95,288.76v13.02V288.76z"/>
<g id="Vrable">
    <g id="tableE">
        <path class="st3" d="M1085.71,605.75L1085.71,605.75c-31.11,31.11-82.02,31.11-113.14,0l0,0c-31.11-31.11-31.11-82.02,0-113.14
            l0,0c31.11-31.11,82.02-31.11,113.14,0l0,0C1116.82,523.73,1116.82,574.64,1085.71,605.75z"/>
    </g>
    <g>
        <rect x="939.19" y="535.96" class="st4" width="183.81" height="31.04"/>
        <text transform="matrix(1 0 0 1 963.259 559.5844)" class="st5 st6 st7">VRABLE</text>
    </g>
</g>
<g>
    <rect x="32.6" y="420.04" class="st8" width="152.64" height="31.04"/>
    <text transform="matrix(1 0 0 1 56.8274 437.9378)" class="st9 st6 st10">LEGEND</text>
</g>
</svg>

{% endblock %}

最后是 JavaScript：

// Run the script once the page is loaded
document.addEventListener('DOMContentLoaded', function() {

    // Vytvorim object submitest, ktora identifikuje element s ID #takenseats
    let takenseats = document.querySelector('#takenseats');
    
    for (let i = 0; i < takenseats.length; i++ ) {
        document.getElementById(takenseats[i]).style.backgroundColor = "#FF0000";
        }
    
    })

哦，还有一些CSS：

  /* Seating */
  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#D1D1D1;stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:11.7338;}
  .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FF0000;stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:11.7338;}
  .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#39B54A;stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:11.7338;}
  .st3{fill:#DDDAC7;}
  .st4{fill-rule:evenodd;clip-rule:evenodd;fill:none;}
  .st5{fill:#FFFFFF;}
  .st6{font-family:'Montserrat';}
  .st7{font-size:33px;}
  .st8{fill:none;}
  .st9{fill:#595957;}
  .st10{font-size:25px;}

和打印屏幕，它的样子： 在此处输入图像描述

请问，我错过了什么？非常感谢您的帮助。

标签： javascripthtmlcssflasksvg

解决方案

您似乎正在写入idsa<div id="takenseats">然后尝试从该 div 中读取这些值，就好像它是一个列表一样。也许那是 Flask 的事情。我不熟悉 Flask，但这对我来说似乎不合适。

我认为您可能需要做的是这样的事情：

document.addEventListener('DOMContentLoaded', function() {

    for (let i = 0; i < ids.length; i++ ) {
        document.getElementById(ids[i]).className.baseVal = "st1";
    }
    
});

推荐阅读