javascript – Loading and replacing content in a modal window

Question:

There are links of the form (data inside is different)

<a class="btn btn-primary" data-bname="Наименование" data-bimg="2.jpg" data-bprice="5080" href="#" data-toggle="modal" data-target="#myModal">Смотреть</a>

and js

<script>
    $(function() {
     $(".bt1n").click(
       function() {
         var bname = null;
         var bimg = null;
         var bprice = null;
         bname = $(this).attr('data-bname');
         bimg = $(this).attr('data-bimg');
         bprice = $(this).attr('data-bprice');

         $(".kartka h1").text(bname);
         $(".kartka img").attr('src', bimg);
         $(".kartka p").html(bprice);
       })
   });
    </script>

Everything is displayed here

        <div class="kartka">
  <h1></h1>
  <img src="" alt="" />
  <p></p>

The question is how to load different content into the modal and clear when the modal is closed. Now for some reason it turns out just a replacement.

In other words, how can I upload several photos from one link, and when I click on another, I could only upload 1 photo and text.

Answer:

Unfortunately, I have not yet found a solution to all the problems, but to display additional images in the button, I added new data for each required image. That is, if when you click on the button in the modal there should be 3 images, then we attach 3 different data to the button

Example

<a class="btn btn-primary" data-bname="Название" data-bimg="1.jpg" data-bimg2="2.jpg" data-bprice="5080" href="#" data-toggle="modal" data-target="#myModal">Приобрести</a>

After we edit js

<script>
$(function() {
 $(".btn").click(
   function() {
     var bname = null;
     var bimg = null;
     var bimg2 = null;
     var bprice = null;
     bname = $(this).attr('data-bname');
     bimg = $(this).attr('data-bimg');
     bimg2 = $(this).attr('data-bimg2');
     bprice = $(this).attr('data-bprice');

     $(".kartka h1").text(bname);
     $(".kartka img").attr('src', bimg);
     $(".k img").attr('src', bimg2);
     $(".kartka p").html(bprice);
   })
});
</script>

Where var bimg2 = null; we have zeroed the variable (or whatever it is called correctly)

bimg2 = $(this).attr('data-bimg2');

We took everything from our data and put it in a variable

$(".k img").attr('src', bimg2);

Here we indicated that everything that is in bimg2 should appear in the k class inside img

And now we add to the modal window the place where our picture will appear

<div class="k"><img src="" alt="" /></div>
Scroll to Top