переменная внутри attr. не может пройти

Question

Нашел много похожих вопросов, но, боюсь, они мне не помогли. У меня есть этот простой jquery скрипт

$('.smallBox').on('click', '[data-click]', function(){
 $id = $(this).attr('data-click');
 $('.modal').css('display', 'block');
 $('#BIG').attr('style', 'background-image:url($id)');
});

Идея состоит в том, чтобы изменить изображение, на которое нажимает пользователь, я получаю URL-адрес img в моей переменной $id, но я не могу передать его на свой .attr, что мне не хватает? Если вы хотите также поиграть https://jsfiddle.net/xg1Lw4yj/

Answer 1

Вы должны изменить строку $('#BIG').attr('style', 'background-image:url($id)'); на $('#BIG').attr('style', 'background-image:url(' + $id + ')'); или $('#BIG').attr('style', `background-image: url ($ {$ id})`);

$('.smallBox').on('click', '[data-click]', function(){
$id = $(this).attr('data-click');
 $('.modal').css('display', 'block');
 $('#BIG').attr('style', 'background-image:url(' + $id + ')');
});

body{
  height:100%;
}
.sbBox{
width:100%;
top: 15%;
position: relative;
}
.smallBox{
  width: 90%;
  height: auto;
  min-height: 60%;
  margin: auto;
  right: 0;
  left: 0;
  position: relative;
  background-color:rgba(200,214,196,0.7);
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1%;
  padding-bottom: 3%;
}
.bildspel1, .bildspel2{
width:50%;
padding-top: 3%;
}
.fyra{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.fyran{
  width: 35%;
  background: center center no-repeat;
  background-size: cover;
  position: relative;
  border-radius: 4px;
  margin:7px;
}
.boot{
  width: 90%;
  background: center center no-repeat;
  background-size: cover;
  position: relative;
  margin: auto;
  border-radius: 4px;
}
.modal {
  display:none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
#BIG{
    background: center center no-repeat;
  height:60%;
  margin:auto;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  top:0;
  width:80%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class = "sbBox" style= "top:0%!important;">
    <div class = "smallBox">
    <h1 style = "width:100%; padding:3%;">Gallery</h1>
        <div class = "bildspel1" style = "width:45%!important;margin:auto;padding-top:0%!important;">
            <div id = "mahmo" class = "boot" data-click = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1" style="background-image:url(https://i.stack.imgur.com/qgNyF.png?s=328&g=1);height:500px;width:80%!important;"></div>
        </div>
        <div class = "bildspel2" style = "padding-top:0%!important;">
            <div class = "fyra">
                <div class = "fyran" data-click = "https://i.stack.imgur.com/qgNyF.png?s=328&g=1" style="background-image:url(https://i.stack.imgur.com/qgNyF.png?s=328&g=1);height:243px;"></div>
                <div class = "fyran" data-click = "https://i.ytimg.com/vi/6Yr_gDLcX7Q/hqdefault.jpg" style="background-image:url(https://i.ytimg.com/vi/6Yr_gDLcX7Q/hqdefault.jpg);height:243px;"></div>
                <div class = "fyran" data-click = "https://i.ytimg.com/vi/6Yr_gDLcX7Q/hqdefault.jpg" style="background-image:url(https://i.ytimg.com/vi/6Yr_gDLcX7Q/hqdefault.jpg);height:243px;"></div>
                <div class = "fyran" data-click = "https://i.ytimg.com/vi/6Yr_gDLcX7Q/hqdefault.jpg" style="background-image:url(https://i.ytimg.com/vi/6Yr_gDLcX7Q/hqdefault.jpg);height:243px;"></div>
            </div>
        </div>
    </div>
  </div>
  <div id="myModal" class="modal">
   <div id = "BIG">
   
   </div>
    
  </div>