Javascript 如何在细枝循环中打印JS函数的结果

我有两个细枝变量。我需要将它们传递给我的js函数TravelTimes，并以html标记返回结果。 这是代码。这是行不通的：

{% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="trainShedule-timeTravel">
                {% block javascripts %}
                    <script> travelTime('{{ item.departure.time }}', '{{ item.arrival.time }}' </script>
                {% endblock %}
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
    function travelTime(firstTime, secondTime){
        let getDate = (string) => new Date(0, 0,0, string.split(':')[0], string.split(':')[1]); 
        let different = (getDate(secondTime) - getDate(firstTime));
        let hours = Math.floor((different % 86400000) / 3600000);
        let minutes = Math.round(((different % 86400000) % 3600000) / 60000);
        let result = hours + ':' + minutes;
        $(this)[0].innerHTML = result;
    }
</script>

标记的作用域不是您想要的。相反，你应该颠倒你的方法：

在HTML5数据属性中添加必要的元数据，例如item.defairation.time和item.arrival.time，例如数据离开时间={{item.defairation.time}。 使用JS迭代这些元素，并使用检索这些元数据。在每次迭代中，使用检索到的数据调用函数travelTime，然后将元素的innerText设置为返回值。您可以使用Element.dataset.departureTime访问数据离开时间属性的值，例如，请注意标记中的烤肉串案例与JS中的骆驼案例 p/s：请注意，您不应该使用重复的ID，因此我将其改为使用类

<div
    class="trainShedule-timeTravel"
    data-departure-time="{{ item.departure.time }}"
    data-arrival-time="{{ item.arrival.time }}">

---

首先，您需要呈现清晰的html，而无需在代码中实现任何javascript

将变量传递给twig循环中的html节点属性并删除节点ID，使用类，如下所示：

 {% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="data_output" data-departure="{{ item.departure.time }}" data-arrival= "{{ item.arrival.time }}"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
    //you don't need params in your functions, we need to get data other way..
    function travelTime(){
        //collect nodes you want to add value
        let dataNodes = document.getElementsByClassName('data_output');

        //loop over dataNodes
        for(let i = 0; i < dataNodes.length; i++){

          //get current values for this node
          let departure = dataNodes[i].dataset.departure;
          let arrival = dataNodes[i].dataset.arrival;

          //here you do your mathematics stuff
          //.... result..

          //finally pass data to html-node          
          dataNodes[i].innerHTML = result;
        }
    }

    //don't forget to call function!
    travelTime();
</script>

然后对ypur js进行如下改进：

 {% for item in trains %}
<div class="trainShedule">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="data_output" data-departure="{{ item.departure.time }}" data-arrival= "{{ item.arrival.time }}"></div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
    //you don't need params in your functions, we need to get data other way..
    function travelTime(){
        //collect nodes you want to add value
        let dataNodes = document.getElementsByClassName('data_output');

        //loop over dataNodes
        for(let i = 0; i < dataNodes.length; i++){

          //get current values for this node
          let departure = dataNodes[i].dataset.departure;
          let arrival = dataNodes[i].dataset.arrival;

          //here you do your mathematics stuff
          //.... result..

          //finally pass data to html-node          
          dataNodes[i].innerHTML = result;
        }
    }

    //don't forget to call function!
    travelTime();
</script>