如何显示选定的 html 多种颜色并推入数组并显示它？颜色在附加时显示多次

Posted 2023-05-09

【中文标题】如何显示选定的 html 多种颜色并推入数组并显示它？颜色在附加时显示多次

【英文标题】：how to show the selected html multiple colors and pushing into an array and to display it? color is displaying multiple times when its appended

【发布时间】：2020-05-15 18:28:49

【问题描述】：

javascript

function fetchc()
pclr=document.getElementById("product_color").value;
clr.push(pclr);
var n=clr.length;
$("#colors").show();
 for (var i=0;i<n;i++)
 
$("#colors").append('<input type="color" value="'+clr[i]+'" disabled>')
 
 console.log(clr);

html

<div class="form-group form-inline">
    <label for="product_color"> Select product Color</label>&emsp;
    <input type="color" class="form-control" id="product_color"placeholder="Product color" style="width: 100px;" onchange="fetchc();">
    <div id="colors" style="display: none;"></div>
  </div>

我得到了正确的输出，但就数组长度而言，它被多次附加......我只是希望它显示一次

【参考方案1】：

只需创建一个html 内容并替换为存在colors html

var clr = []
function fetchc()
pclr=document.getElementById("product_color").value;
clr.push(pclr);
var n=clr.length;
$("#colors").show();
var html = "";
 for (var i=0;i<n;i++)
 
html += '<input type="color" value="'+clr[i]+'" disabled>';
 

 $("#colors").html(html);
/*  OR don't use for loop just append */
/* $("#colors").append('<input type="color" value="'+pclr+'" disabled>')*/
 
 console.log(clr);
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-inline">
    <label for="product_color"> Select product Color</label>&emsp;
    <input type="color" class="form-control" id="product_color"placeholder="Product color" style="width: 100px;" onchange="fetchc();">
    <div id="colors" style="display: none;"></div>
  </div>

【参考方案2】：

每次调用 fetchc() 时，您都会遍历您的 clr 数组，因此您重新添加之前的选择。

假设你在这个函数之外声明了clr，你可以看到这个例子：

const addedColors = [];
function fetchc()
  const selectedColor = document.getElementById("product_color").value;
  console.log(`selectedColor is $selectedColor`);
  addedColors.push(selectedColor);
  addedColors.map((color) => 
    console.log(`adding color $color`)
  )

在这种情况下，输出将是

selectedColor 是 #004080 添加颜色 #004080 selectedColor 是 #400040 添加颜色 #004080 添加颜色 #400040 selectedColor 是 #400080 添加颜色 #004080 添加颜色 #400040 添加颜色 #400080

如您所见，您刚刚添加了第一种颜色 (004080) 3 次。

因此，只需添加新颜色（同样您不需要 jQuery）：

function fetchc()
  const selectedColor = document.getElementById("product_color").value;
  console.log(`selectedColor is $selectedColor`);
  const newInput = document.createElement("input");
  newInput.type = 'color';
  newInput.value = selectedColor;
  document.getElementById("colors").appendChild(newInput);
  addedColors.push(selectedColor);