Question

我在jsp内创建了一个循环，该循环从数据库中获取10部电影。每部电影都分配有唯一的ID（变量elementId），并且该电影的等级也已找到（变量userRate）。

我有一个函数fillRateButton，该函数获取elementId和userRate作为参数，并赋予该电影特定的样式。我希望它在创建后就针对创建的每个电影运行。这就是为什么我将脚本标记放在for循环的末尾。

<script> fillRateButton("<%=elementId %>",<%=userRate %>); </script>

问题在于这不起作用，并且由于变量onload()发生更改，因此我无法使用userRate调用函数。

<% 
     String email = ((request.getSession()).getAttribute("emailSession")).toString();

     for (int i = 0; i<10;i++){
           Movie movie = GetMovie.simply();
           String movieSrc ="images/movies/m" + movie.getMovieId() + ".jpg";
           int userRate = UserRates.getRates(email, movie.getMovieId());

            String elementId = "element"+i;
%>

    <div class="w3-row-padding w3-white w3-border w3-padding">
        <div class="w3-col s5">             
            <div style="width:100%;height:200px">
                <img src="<%= movieSrc %>" alt="<%=movie.getMovieName() %>" class="w3-border w3-round " style="width:100%;height:100%">
            </div>
    <!-- Rate the movie -->
    <div class= "w3-container w3-teal w3-padding-left" id="<%=elementId %>">
        <span class="fa fa-heart w3-hover-text-pink w3-xlarge rateButton" style="cursor:pointer;color:white;" onClick="addFill(this,2);addRating(2,<%=movie.getMovieId() %>)"></span>
        <span class="fa fa-thumbs-up  w3-hover-text-blue w3-xlarge rateButton" style="cursor:pointer;color:white;" onClick="addFill(this,1);addRating(1,<%= movie.getMovieId() %>)"></span>
        <span class="fa fa-thumbs-down  w3-hover-text-black w3-xlarge rateButton" style="cursor:pointer;color:white;" onClick="addFill(this,0);addRating(0,<%= movie.getMovieId() %>)"></span>              
    </div>
                <script> fillRateButton("<%=elementId %>",<%=userRate %>); </script>

    <%} %> <!-- End of the for loop -->

我的JavaScript函数位于关闭body元素之前

const fillRateButton = (element , rate)=>{
    let rateMenu = document.getElementById(element);
    let list = rateMenu.getElementsByClassName("rateButton");
    if (rate===2)
        list[0].style.color = "#ff1a40";
    else if (rate===1)
        list[1].style.color = "blue";
    else if (rate===0)
        list[2].style.color = "black";

};

我不熟悉jQuery库，因此如果您使用纯JavaScript回答，我将不胜感激。

创建HTML元素后，如何调用JavaScript函数？

0 个答案: