使用 javascript 从 div 获取数据

Question

我有一个电影列表及其信息，我想做的是使用 javascript 获取可用天数，然后将这些信息添加到模式中的 div。这是我的代码：

  <div>
  {% for movie in movies %}
    <div class="movie">
    {{ movie.title.value }}
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}">
    <p>{{ movie.field_description.value }}</p>

    <h3> 'This movie is available on:' </h3>
    <div class="days">
    {% for day in movie.field_days %}
    {{day.entity.label}}
    {% endfor %}
    </div>
    <br>
    <button id="b" class="bclass" style="visibility:hidden"> Reserve</button>
    </div>
  {% endfor %}
   
  </div>


<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Available days for this movie are:</h4>
    <div class= "modal-body">
     <div class=days></div>
    </div>
  </div>

</div>

我想获取 {{day.entity.label}}，然后将其添加到模态中的 div。有人可以帮忙吗？提前致谢。

Answer 1

这里有一个demo，我没有包含模态库，不过没关系，你只需要取消最后一行的注释，点击保留就可以在底部看到模态内容

$(".bclass").click(function (e) {
  var movie = e.target.closest(".movie");
  var days = movie.querySelector(".days");
  $(".modal .days").html(days.innerHTML);
  // $(".modal").modal("show");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="movie">
    {{ movie.title.value }}
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}">
    <p>{{ movie.field_description.value }}</p>
    <h3> 'This movie is available on:' </h3>
    <div class="days">1 2 3</div>
    <br>
    <button id="b" class="bclass" style=""> Reserve</button>
  </div>

</div>
<div>
  <div class="movie">
    {{ movie.title.value }}
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}">
    <p>{{ movie.field_description.value }}</p>
    <h3> 'This movie is available on:' </h3>
    <div class="days">4 56 6</div>
    <br>
    <button id="b" class="bclass" style=""> Reserve</button>
  </div>

</div>
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Available days for this movie are:</h4>
    <div class="modal-body">
      <div class=days></div>
    </div>
  </div>

</div>

使用 javascript 从 div 获取数据

Fetch data from div with javascript

html

javascript

twig