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

Question

我有两个树枝变量。我需要将它们传递给我的 js 函数 travelTime() 并且 return 导致 html-tag。
这是代码。这是行不通的：

{% 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>

Answer 1

<script> 标签的范围不符合您的预期。相反，你应该改变你的方法：

在 HTML5 data- 属性中添加必要的元数据，例如 item.departure.time 和 item.arrival.time，例如data-departure-time="{{ item.departure.time}}".
使用 JS 遍历这些元素并使用 Element.dataset 检索这些元数据。在每次迭代中，使用检索到的数据调用函数 travelTime()，然后将元素的 innerText 设置为 return 值。例如，您可以使用 Element.dataset.departureTime 访问 data-departure-time 属性的值（注意标记中的 kebab-case VS JS 中的驼峰式大小写）

p/s：请注意，您不应使用重复的 ID，因此我将其更改为使用 class。

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

然后，在您的 JS 中，只需遍历与选择器匹配的所有元素 .trainShedule-timeTravel:

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;

    return result;
}

const els = document.querySelectorAll('.trainShedule-timeTravel');
Array.from(els).forEach(el => {
    el.innerText = travelTime(el.dataset.departureTime, el.dataset.arrivalTime);
});

Answer 2

首先，您需要在不在代码中实现任何 javascript 的情况下呈现清晰的 html。

将变量传递给 html-twig 循环中的节点属性并删除节点的 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 %}

然后像这样改进 ypur js:

<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>

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

How do I print a result of JS function inside a twig loop

html

javascript

twig