javascript - 移动到另一个列表时更改 div 的颜色

标签 javascript html css

下面的代码由三个不同的数组 Red Fruits、Green Fruits 和 Suggested Fruits 组成到 green and red fruits list 根据他们的数组键，但问题是我正在尝试这样做，以便每当我将值从随机列表移动到 green/red fruits 列表 它将是不同的颜色，不是红色或绿色。因此，例如，当我将值从 random fruits 移动到 red fruits list 时，它将是粉红色，当它返回时，它将是原始颜色灰色，当我将 随机水果值移动到绿色水果列表。我厌倦了将 pink css 添加到类中，但它似乎不起作用任何帮助将不胜感激。

var fruits = [{
    fruit: "Apple",
    type: "1"
  },
  {
    fruit: "Tomato",
    type: "1"
  },
  {
    fruit: "Lime",
    type: "2"
  },
  {
    fruit: "Guava",
    type: "2"
  },
];
var fruitTypeMap = {
  "1": "Red Fruits",
  "2": "Green Fruits"
}
var fruitTypes = {
  "Red Fruits": ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'],
  "Green Fruits": ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'],
  "Random Fruits": fruits.map(fruit => fruit.fruit)
};
var clonePill = $(".clone");
Object.keys(fruitTypes).forEach(key => {
  fruitTypes[key].forEach(fruit => {
    var $newFruit = clonePill.clone();
    $newFruit.removeClass("clone");
    $newFruit.text(fruit);
    $(`[data-fruits="${key}"]`).append($newFruit);
  });
});

function moveFruit(e) {
  var fruitCategory = $(this).parent().data("fruits");
  var fruitName = $(this).text();
  var $fruit = $(this).detach();
  if (fruitCategory === "Random Fruits") {
    var fruitType = fruits.find(fruit => fruit.fruit === fruitName).type;
    var fruitArr = fruitTypes[fruitTypeMap[fruitType]];
    var fruitIndex = fruitTypes["Random Fruits"].indexOf(fruitName);
    fruitArr.push(fruitTypes["Random Fruits"].splice(fruitIndex, 1)[0]);
    $fruit.addClass("movable pinkcolor");
    $(`[data-fruits="${fruitTypeMap[fruitType]}"]`).append($fruit);
  } else {
    var fruitArr = fruitTypes[fruitCategory];
    var fruitIndex = fruitArr.indexOf(fruitName);
    fruitTypes["Random Fruits"].push(fruitArr.splice(fruitIndex, 1)[0]);
    $('[data-fruits="Random Fruits"]').append($fruit);
  }
}
$(".red-fruits, .green-fruits").on("click", ".movable", moveFruit);
$(".random-fruits").on("click", ".fruit-pill", moveFruit);

var lol = JSON.stringify(fruitTypes);
console.log(lol);
.clone {
  display: none;
}

.fruit-pill {
  border-radius: 20px;
  padding: 10px 15px;
  display: inline-block;
}

.movable {
  cursor: pointer;
}

.red-fruits>.fruit-pill {
  background-color: rgba(255, 0, 0, 0.6);
}

.green-fruits>.fruit-pill {
  background-color: rgba(0, 255, 0, 0.6);
}

.random-fruits>.fruit-pill {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.skillpanel {
  display: table;
  height: 100%;
  width: 75%;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.center {
  display: flex;
  justify-content: center
}

.longpanel {
  margin-top: 5px;
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 75%;
  background-color: white;
}

.pink {
  background-color: pink;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />

</head>

<body>
  <div class="skillpanel">
    <div style="float:left;width:calc(50% - 5px);">
      <div class="wrappingflexbox red-fruits" data-fruits="Red Fruits">
      </div>
    </div>
    <div style="float:right;width:calc(50% - 5px);">
      <div class="wrappingflexbox green-fruits" data-fruits="Green Fruits">
      </div>
    </div>
  </div>
  <div class="center">
    <div class="longpanel">
      <div class="wrappingflexbox random-fruits" data-fruits="Random Fruits">
      </div>
    </div>
  </div>
  <div class="fruit-pill clone"></div>

</body>

</html>

最佳答案

@Bobby，你需要改变

1) 在 CSS 中

.pink {
  background-color: pink;
}

到下面

.pinkcolor {
  background-color: pink !important;
}

2)当你向后移动时，你需要返回原来的灰色，所以你需要添加

$fruit.removeClass("movable pinkcolor");

使用您的 moveFruit 函数的其他条件。

试试

var fruits = [{
    fruit: "Apple",
    type: "1"
  },
  {
    fruit: "Tomato",
    type: "1"
  },
  {
    fruit: "Lime",
    type: "2"
  },
  {
    fruit: "Guava",
    type: "2"
  },
];
var fruitTypeMap = {
  "1": "Red Fruits",
  "2": "Green Fruits"
}
var fruitTypes = {
  "Red Fruits": ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'],
  "Green Fruits": ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'],
  "Random Fruits": fruits.map(fruit => fruit.fruit)
};
var clonePill = $(".clone");
Object.keys(fruitTypes).forEach(key => {
  fruitTypes[key].forEach(fruit => {
    var $newFruit = clonePill.clone();
    $newFruit.removeClass("clone");
    $newFruit.text(fruit);
    $(`[data-fruits="${key}"]`).append($newFruit);
  });
});

function moveFruit(e) {
  var fruitCategory = $(this).parent().data("fruits");
  var fruitName = $(this).text();
  var $fruit = $(this).detach();
  if (fruitCategory === "Random Fruits") {
    var fruitType = fruits.find(fruit => fruit.fruit === fruitName).type;
    var fruitArr = fruitTypes[fruitTypeMap[fruitType]];
    var fruitIndex = fruitTypes["Random Fruits"].indexOf(fruitName);
    fruitArr.push(fruitTypes["Random Fruits"].splice(fruitIndex, 1)[0]);
    $fruit.addClass("movable pinkcolor");
    $(`[data-fruits="${fruitTypeMap[fruitType]}"]`).append($fruit);
  } else {
    var fruitArr = fruitTypes[fruitCategory];
    var fruitIndex = fruitArr.indexOf(fruitName);
    fruitTypes["Random Fruits"].push(fruitArr.splice(fruitIndex, 1)[0]);
    $fruit.removeClass("movable pinkcolor");
    $('[data-fruits="Random Fruits"]').append($fruit);
  }
}
$(".red-fruits, .green-fruits").on("click", ".movable", moveFruit);
$(".random-fruits").on("click", ".fruit-pill", moveFruit);

var lol = JSON.stringify(fruitTypes);
console.log(lol);
  .clone {
  display: none;
}

.fruit-pill {
  border-radius: 20px;
  padding: 10px 15px;
  display: inline-block;
}

.movable {
  cursor: pointer;
}

.red-fruits>.fruit-pill {
  background-color: rgba(255, 0, 0, 0.6);
}

.green-fruits>.fruit-pill {
  background-color: rgba(0, 255, 0, 0.6);
}

.random-fruits>.fruit-pill {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.skillpanel {
  display: table;
  height: 100%;
  width: 75%;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.center {
  display: flex;
  justify-content: center
}

.longpanel {
  margin-top: 5px;
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 75%;
  background-color: white;
}

.pinkcolor {
  background-color: pink !important;
}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="skillpanel">
    <div style="float:left;width:calc(50% - 5px);">
      <div class="wrappingflexbox red-fruits" data-fruits="Red Fruits">
      </div>
    </div>
    <div style="float:right;width:calc(50% - 5px);">
      <div class="wrappingflexbox green-fruits" data-fruits="Green Fruits">
      </div>
    </div>
  </div>
  <div class="center">
    <div class="longpanel">
      <div class="wrappingflexbox random-fruits" data-fruits="Random Fruits">
      </div>
    </div>
  </div>
  <div class="fruit-pill clone"></div>

关于javascript - 移动到另一个列表时更改 div 的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50983422/

上一篇：html - 边框在手机上看起来很近

下一篇：使用 translate3d 的 CSS 加载器在 Internet Explorer 11 中不起作用

相关文章：

javascript - jQuery的滑动功能与CSS动画冲突

javascript - 在不接触其他人的情况下对 setState 使用react

javascript - react : Props destructuring and memory usage

css - 居中基于百分比的 div

javascript - 使用 attr() 和数据标签操作 css

html - 即使我正确引用了 Bootstrap ，也没有显示相机和视频图标

javascript - Firebase 无法在本地主机上初始化

javascript - 使用 javascript HTML5 和 CSS3 在设置的路径上滚动图像

android - Kotlin:以编程方式编辑pdf或html

css - 背景图像未完全拉伸(stretch)

©2024 IT工具网  联系我们