Question

我下面的代码由三个不同的数组Red Fruits，Green Fruits和Suggested Fruits组成，我可以根据以下命令拼接并将一个数组值从Suggested Fruits推到green and red fruits list它们的数组键，但是问题是我试图这样做，以便每当我将值从随机列表移到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>

Answer 1

@Bobby，您需要更改

1）在CSS

restTemplate.postForEntity(postUrl, request, responseType)

到下面

.pink {
  background-color: pink;
}

2）当您向后移动时，您需要返回原始的灰色，因此您需要添加

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

带有moveFruit函数的else条件。

尝试

$fruit.removeClass("movable pinkcolor");

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;
}

Answer 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名称是粉色。

希望是正确的：）

Answer 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>

Answer 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
    }

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

4 个答案: