如何在网址中添加变量

Question

我一直试图在单击ID时更改变量，该ID现在正在运行。下一步是将变量添加到url中以更改背景图片。但是，经过数小时的搜索和尝试后，我找不到在url中添加变量的方法。

（整个对象的想法是一个网格，您可以在其中将图标放置在所需的位置上。然后选择带有id的图标，然后将其放置在具有像素类的网格中）。

url = 'url'
icon = '(icon.png)'

$('#p1').click(function (){
    icon = "icon2.png";
    alert(icon);
});


$('#p2').click(function (){
    icon = "icon3.png";
    alert(icon);
});


// onclick function classes 
  $(".pixel").click(function() {
        //function that changes background to url
    // $(this).css('background-image', var(icon));
    $(this).css("background-image", "url(" + icon ")");
});

<div id="p1" class="pen"></div>
<div id="p2" class="pen"></div>


  <div id="art">
    <div class="row">
      <div class="pixel"></div>
      <div class="pixel"></div>
  </div>
</div>

#art {
  display: table;
  border-spacing: 1px;
  background-color: black;
  border: 1px solid black;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
  background-color: white;
  width: 25px;
  margin: 1px;
  height: 25px;
  background-size: contain;
}

.pen {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 2px solid black;
}