スライダー（入力範囲）でelemetsスタイルを変更する

Question

私はコンテナ（例では60行目）というキーと値のペアelement-id : opacityを持つ変数/オブジェクトを持っています。

forループは、そのコレクション内の各idを繰り返し、その要素の上にスライダを作成します。そのスライダの開始値はopacityと同じです。

スライダーが聞き取り、opacityを変更する必要があります。しかし、作成される最後の要素のCSSだけを変更します。

"working"コードはjsfiddle.にあります。両方のスライダを試してみてください。

私の質問は、最初の要素のスライダがイベントのリッスンを停止し、最後に作成されたスライダがまだ聞き取り、cssを適切に変更する理由です。また、containerオブジェクトに1つの項目しかない場合、コード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

[OK]を、私はそれを引き出すために管理方法に興味がある皆のために、ここにコードがあります。

'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)=>{ 
 
\t 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>

することができる最高のthats場合はいけない知っているが、それは動作します。