使用滑塊（輸入範圍）更改元素樣式

我有變量/對象，其中包含鍵值對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>

來源

2017-11-11 Learn on hard way

請在您的問題關閉之前將您的代碼放入本網站的帖子中。 – zer00ne

'＃id's **必須是唯一的**否則你只會在第一個事物上做所有事情，因爲瀏覽器將不再尋找該ID的任何其他元素，因爲邏輯上應該只有一個。 – zer00ne

即使每個ID只有一個div，問題也是一樣的。你的意思是滑塊ID？ –

好，爲大家，有興趣我如何設法將其拉出，這裏是代碼。

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

不知道如果那是最好的，就可以了，但它的作品。

來源

2017-11-11 19:21:53

這就是我所說的，好工作。 – zer00ne

@ zer00ne謝謝先生。 :) –

使用滑塊（輸入範圍）更改元素樣式

回答

相關問題