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

这是一个演示，我没有包含模态库，但是没关系，你只需要取消最后一行的注释，当你点击保留时，你可以在底部看到模态内容

 $(".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>