Передать значение в Bootstrap

Ниже приведен загрузочный код для отображения списка мелодий. при нажатии тега в первом коде он переходит к #tuneIDModal, этот код также упоминается ниже. Я хочу передать значение из тега гиперссылки (data-myvalue) в #tuneIDModal (заменив значение на 291033). Оба кода находятся на одной странице. Может ли кто-нибудь помочь мне, как я могу реализовать.

Домашняя страница.jsp

<!-- Code to show Tune List -->

<div class = "item">
 <div class = "htt-wrap" data-url = "downloadfile.jsp?filename=<%=rs1.getString("tnumber")%>.mp3">
  <img src = "assets/img/desktop_top_tune_01.png" alt = "01" />
   <div class = "item-desc">
     <div class = "item-desc-top">
     <h4><%=rs1.getString("data1")%></h4>
 <h6><%=rs1.getString("data2")%></h6>
 <span>Tune ID: <%=rs1.getString("tnumber")%></span>
</div>
<div class = "item-desc-bottom">
 <div class = "item-desc-left">
  <img class = "img-fluid db-play" src = "assets/img/play.svg" alt = "">
 </div>
 <div class = "item-desc-right">
  <a href = "#" class = "db-modal" data-toggle = "modal" data-target = "#tuneIDModal" data-myvalue = "<%=rs1.getString("tunenumber")%>">
   <img class = "img-fluid" src = "assets/img/dots.svg" alt = "">
  </a>
   </div>
  </div>
  </div>
 </div>
</div>




<!-- details for Tune -->

<div class = "modal fade" id = "tuneIDModal" tabindex = "-1" aria-labelledby = "tuneIDModalLabel" aria-hidden = "true">
 <div class = "modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class = "modal-content">
   <div class = "modal-header">
    <div class = "db-modal-header-img">
     <img src = "assets/img/modal-img.png" alt = "" class = "img-fluid">
    </div>
    <div class = "db-modal-header-content">
     <h4>Tune name</h4>
     <h6>xyz</h6>
     <span>TID: 291033</span>
    </div>
    <div class = "db-modal-header-controls play-modal">
     <img src = "assets/img/play.svg" alt = "" class = "img-fluid db-play">
    </div>
    </div>
   </div>
  </div>
</div>

jquery bootstrap-modal

12.12.2020 05:30

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете написать событие клика, чтобы всякий раз, когда нажимается ваш .db-modal, получать значение attr и добавлять это значение внутри тега span внутри модального окна, используя .text("yourvalue").

Демонстрационный код:

//on click of button
$(document).on("click", ".db-modal", function() {
//replcae value inside modal span
  $("#tid_modal").text("TID : " + $(this).attr("data-myvalue"))
})

<!-- Code to show Tune List -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class = "item">
  <div class = "htt-wrap" data-url = "downloadfile.jsp?filename=111.mp3">
    <img src = "assets/img/desktop_top_tune_01.png" alt = "01" />
    <div class = "item-desc">
      <div class = "item-desc-top">
        <h4>
          somwthing
        </h4>
        <h6>
          somwthing 11
        </h6>
        <span>Tune ID:111</span>
      </div>
      <div class = "item-desc-bottom">
        <div class = "item-desc-left">
          <img class = "img-fluid db-play" src = "assets/img/play.svg" alt = "">
        </div>
        <div class = "item-desc-right">
          <a href = "#" class = "db-modal" data-toggle = "modal" data-target = "#tuneIDModal" data-myvalue = "111"> click
            <img class = "img-fluid" src = "assets/img/dots.svg" alt = "">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>




<!-- details for Tune -->

<div class = "modal fade" id = "tuneIDModal" tabindex = "-1" aria-labelledby = "tuneIDModalLabel" aria-hidden = "true">
  <div class = "modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class = "modal-content">
      <div class = "modal-header">
        <div class = "db-modal-header-img">
          <img src = "assets/img/modal-img.png" alt = "" class = "img-fluid">
        </div>
        <div class = "db-modal-header-content">
          <h4>Tune name</h4>
          <h6>xyz</h6>
          <!--given id here-->
          <span id = "tid_modal">TID: 291033</span>
        </div>
        <div class = "db-modal-header-controls play-modal">
          <img src = "assets/img/play.svg" alt = "" class = "img-fluid db-play">
        </div>
      </div>
    </div>
  </div>
</div>

ваш код здесь работает нормально, но я скопировал тот же код в IDE netbeans, он не работает. почему это не работает в netbeans?.

— 12.12.2020 06:29

вы видите какую-либо ошибку в консоли браузера?

— 12.12.2020 06:29

я не получаю никаких ошибок, но отображаю TID: 291033

— 12.12.2020 06:31

Вы добавили id = "tid_modal" к тегу span?

— 12.12.2020 06:32

да, я добавил в промежутке. на самом деле я скопировал весь ваш код на отдельную новую страницу (Code.jsp), там также отображается TID: 291033.

— 12.12.2020 06:35

сделать alert("in") внутри обработчика кликов также сделать alert($(this).attr("data-myvalue")) дайте мне знать, отображается ли это предупреждение или нет. Также код jquery должен быть внутри тегов <script></script>

— 12.12.2020 06:38

я скопировал код jquery внутри <script></script>. но предупреждение не показывает

— 12.12.2020 06:52

Давайте продолжим обсуждение в чате.

— 12.12.2020 06:53

теперь работает, я добавил скрипт jquery перед </html> Спасибо, @Swati

— 12.12.2020 07:06

12.12.2020 05:53