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

【问题标题】：Changing color of div when moving to another list移动到另一个列表时更改 div 的颜色
【发布时间】：2018-06-22 08:04:41
【问题描述】：

我在下面有这段代码，它由三个不同的数组 Red Fruits、Green Fruits 和 Suggested Fruits 组成是我试图做到这一点，以便每当我将随机列表中的值移动到green/red fruits list 时，它将是不同的颜色，不是红色或绿色。因此，例如，当我将一个值从random fruits 移动到red fruits list 时，它将是粉红色，当它返回时，它将是原始颜色灰色，当我移动random fruits value to green 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>

【问题讨论】：

    标签： javascript html css


    【解决方案1】：

    @Bobby，你需要改变

    1) 在css中

    .pink {
  background-color: pink;
}

    到下面

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

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

    $fruit.removeClass("movable pinkcolor");

    你的 moveFruit 函数的 else 条件。

    试试

    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>

    【讨论】：

    • 你给我写的很快 :))))
    【解决方案2】：

    先添加css代码：

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

    改变 moveFruit 功能后

    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);
    $fruit.removeClass("movable pinkcolor"); //add this
  }
}

    P.S：您的 css 代码类名称是“粉红色”。但是 js 代码 addclass 名称是 粉红色。

    希望是对的 :)

    【讨论】：

      【解决方案3】：

      不使用!important的解决方案：

      • 定义一个新的 CSS 类original，为fruit-pills 赋予红色或绿色。
      • 将此类添加到每个水果中
      • 将随机水果移动到绿色或红色水果 div 时，删除 original 类。 

      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.addClass("original");
    $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 pink");
    $fruit.removeClass("original");
    $(`[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>.original {
  background-color: rgba(255, 0, 0, 0.6);
}

.green-fruits>.original {
  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>

      【讨论】：

        【解决方案4】：

        首先，CSS 上的pinkcolor 类不是pinkcolor 类，而是pink 类。

        其次，您可以尝试将!important 值添加到您的background-color: pink

        CSS 代码

            .pinkcolor{ /*I change your class, from pink to pinkcolor here */
      background-color: pink !important; //Adding !important
    }

        【讨论】：

          猜你喜欢
          • 1970-01-01
          • 2013-03-12
          • 2019-04-17
          • 2020-08-12
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-04-20
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode