时间戳

首页 > 解决方案 > 尝试在其旁边放置具有相同类名的另一个 div 时，div 被替换

javascript - 尝试在其旁边放置具有相同类名的另一个 div 时，div 被替换

问题描述

问题：

我有一个可以选择颜色的下拉菜单。选择颜色后，下拉菜单关闭，所选颜色由框 div 表示，背景图像设置为具有所选颜色的图像。

这只是让使用页面的人知道他们选择了什么颜色的一种方式。如果他们想选择更多颜色，他们可以返回颜色菜单并选择另一种颜色。发生这种情况时，应将新选择的颜色放在先前选择的颜色旁边。

我试过的：

我正在使用背景图像来表示颜色。无论如何，我无法达到我想要的效果。第一个选择颜色 div 刚刚被新的替换。我浏览了很多帖子并尝试过 .prepend()、.append()、.after()、.insertAfter()。

我已经在 J​​SFiddle 上复制了我的代码。我有一个显示页面加载时间的默认图像，然后每次单击包含 div 框的容器时，我都会尝试附加一个新图像。

我的代码：

HTML：

<div class="colour-boxes-container">
    <div class="colour-box" style="background-image: url('https://cdn.clipart.email/0197fe6d344ce508961ca63564ce8466_blue-square-clip-art-at-clkercom-vector-clip-art-online-_578-600.svg')"></div>
</div>

JS：

$(".colour-boxes-container").on('click', function() {


 alert("Clicked container");

  var newSelectedColour = $(".colour-box")
       .css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")

  $(".colour-box:last").after(newSelectedColour);

});

CSS：

.colour-boxes-container {
  height: 55px;
  width: auto;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: left;
}

.colour-box {
  height: 33px;
  width: 33px;
  margin-right: 7px;
}

https://jsfiddle.net/m0c8q742/1/

我在这里能错过什么？

标签： javascriptjqueryhtmlcss

解决方案

这段代码是问题所在：

$(".colour-box")
       .css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")

这段代码本质上是说“在页面上查找任何具有“颜色框”类的元素，并更改这些元素的 CSS 背景图像。” 您一直在更新旧元素，而不是创建新元素。

如果要创建新元素，可以执行以下操作：

$(".colour-boxes-container").on('click', function() {
  var $div = $(document.createElement('div'));
  $div.addClass('colour-box');
  $div.css("background-image", "url('https://media.istockphoto.com/photos/bright-brown-leather-texture-seamless-square-background-tile-r-picture-id958497414')")
  $(".colour-boxes-container").append($div);
});

推荐阅读