使用滑块更改元素样式（输入范围）

Question

我的变量/对象具有称为容器的键值对element-id : opacity（示例中的第60行）。

对于该集合中每个id的循环迭代，并在该元素的顶部创建滑块。该滑块的起始值与opacity相同。

滑块侦听并应更改opacity，它确实如此。但它只会改变创建的最后一个元素的css。

可以在jsfiddle.上找到“工作”代码。尝试使用两个滑块查看。

我的问题是，为什么第一个元素上的滑块停止侦听事件，而最后一个创建的仍然会正确地监听和更改css？此外，如果container对象中只有一个项目，则代码works as it should for every element.

此外，我需要做些什么调整和改变以使其工作？欢迎任何输入/内部。提前谢谢！

function createSlider(elem, html) {
    /**
        <input id="range_test" type="range">
        Hello, world!
    **/
    // create message element
    let message = document.createElement('div');
    /**
        <div>
    **/
    // better to use a css class for the style here
    message.style.cssText = "position:absolute; color: red";
    /**
        position: fixed; color: red;
    **/
    // assign coordinates, don't forget "px"!
    let coords = elem.getBoundingClientRect();
    /**
        DOMRect { x: 551.5, y: 73.83332824707031, width: 160, height: 17.333343505859375, top: 73.83332824707031, right: 711.5, bottom: 91.16667175292969, left: 551.5 }
    **/
    message.style.left = coords.left + "px";
    message.style.top = coords.top + "px";
    message.style.zIndex = '1992';
    /**
        551.5px
        73.8333px
        1992
    **/

    message.appendChild(html);


    return message;
    /**
        <div style="position: fixed; color: red; left: 551.5px; top: 73.8333px; z-index: 1992;">
    **/
}
// id = new_price

// Generates slider for each id in object
function generateSlider(value_of_slider) {
    var new_slider = document.createElement("INPUT");
    new_slider.setAttribute("type", "range");
    new_slider.value = value_of_slider * 100;

    return new_slider;
}

// Changes the style of id
function changeStyle(id, value) {
    var elements = document.querySelectorAll(id);

    elements.forEach((element) => {
        element.style.opacity = value;
    });

    console.log("The value of "+id+" is "+value);
}

var container = {
    "#new_price": "0.4",
};
for (id in container) {
    changeStyle(id, container[id]);
    var first_element = document.querySelector(id);
    var generate_slider = generateSlider(container[id]);

    let slider = createSlider(first_element, generate_slider);
    document.body.append(slider);

    generate_slider.addEventListener('input', () => {
        container[id] = (generate_slider.value / 100).toString();
        changeStyle(id, container[id]);
    });

};

/*--------------------
Mixins
---------------------*/
/*--------------------
Body
---------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  font-family: 'Open Sans Condensed', sans-serif;
}

body {
  background: -webkit-linear-gradient(75deg, #d33f34 50%, #a61322 50.1%);
  background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%);
}

/*--------------------
Shop Card
---------------------*/
.shop-card {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 350px;
  background: #f5f5f5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  z-index: 2;
}
.shop-card figure {
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none !important;
}
.shop-card figure img {
  margin: -95px 0 -60px;
  width: 110%;
}
.shop-card .title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 30px;
  color: #23211f;
  margin-bottom: 5px;
}
.shop-card .desc {
  font-size: 17px;
  opacity: .8;
  margin-bottom: 3px;
}
.shop-card .cta {
  padding: 20px 20px 5px;
}
.shop-card .cta::after {
  content: '';
  display: table;
  clear: both;
}
.shop-card .price {
  float: left;
  color: #FF3100;
  font-size: 22px;
  font-weight: 900;
  padding-top: 2px;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out;
  margin-top: 4px;
}
.shop-card .btn {
  position: relative;
  z-index: 1;
  float: right;
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: #FF3100;
  padding: 12px 18px;
  cursor: pointer;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  line-height: .95;
  border: none;
  background: none;
  outline: none;
  border: 1px solid #FF3100;
  border-radius: 20px;
  overflow: hidden;
}
.shop-card .btn .bg {
  width: 101%;
  height: 101%;
  display: block !important;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  background: -webkit-linear-gradient(315deg, #a61322, #d33f34);
  background: linear-gradient(135deg, #a61322, #d33f34);
}
.shop-card .btn:hover {
  color: #fff !important;
  border: 1px solid transparent !important;
}
.shop-card .btn:hover .bg {
  opacity: 1;
}

/*--------------------
Slick Dots
---------------------*/
.slick-dots {
  bottom: -30px;
}
.slick-dots a {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.slick-dots span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.slick-dots circle {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: 39;
  -webkit-transition: all .9s ease-in-out;
  transition: all .9s ease-in-out;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}
.slick-dots .slick-active circle {
  stroke-dashoffset: 0;
}

/*--------------------
Background
--------------------*/
.bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(75deg, #d33f34 50%, #a61322 50.1%);
  background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%);
  z-index: 1;
  display: none;
}

    <div id="the_card" class="shop-card">
        <div class="title"> calça clorinda bordada black </div>
        <div class="desc">
            Womans cloath
        </div>
        <div class="slider">
            <figure data-color="#E24938, #A30F22 ">
                <img src=" http://images.animaleabrand.com.br/commerce/animale/medias/produtos/Medium_04.23.0238_0005_EF_R.jpg " />
            </figure>
        </div>

        <div id="new_price" class="cta">
            <div class="price"> 6x de R$ 126,33</div><br>
            <div class="price"> 6x de R$ 126,33</div>
        </div>
        <div id="new_price" class="cta">
            <div class="price"> 6x de R$ 126,33</div><br>
            <div class="price"> 6x de R$ 126,33</div>
        </div>

    </div>
    <div class="bg"></div>

    </div>

Answer 1

好的，对于每个对我如何设法解决问题感兴趣的人来说，这是代码。

'use strict';

// Generates slider for each id in object
function generateSlider(value_of_slider) {
    var new_slider = document.createElement("INPUT");
    new_slider.setAttribute("type", "range");
    new_slider.value = value_of_slider * 100;

    return new_slider;
}

var x = document.querySelectorAll('.ctg');

var y = Array.map(x, (element, i)=>{
	return {id: element.id, number: i, opacity: element.style.opacity};
});

function changeStyle(i) {
    x[i].style.opacity = y[i].opacity;
}

y[0].opacity = "0.6";
y[1].opacity = "0.3";

var i = 0;

for (i; i < y.length; i++) {
    let temp = y[i].number; // same as i
    //initialise style with some predefined opacity
    changeStyle(temp);
    var slider= generateSlider(y[temp].opacity);
    document.body.append(slider);

    slider.addEventListener('input', (obj)=>{
        y[temp].opacity = (obj.target.value/100).toString();
        changeStyle(temp);
    });

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>
        <div id="main1" class="ctg" style="width:200px; height: 200px; background-color: red;">
            one
        </div>
        <div id="main2" class="ctg" style="width:200px; height: 200px; background-color: blue;">
            two
        </div>
        <script type="text/javascript" src="main.js">

        </script>
    </body>
</html>

不知道那是最好的，但它确实有用。