首頁猿問 Javascript將元素Id作為...

Javascript將元素Id作為參數(shù)傳遞

JavaScript

猛跑小豬 2021-11-25 16:36:28

我需要一個 html 頁面中的一堆滑塊。我發(fā)現(xiàn)w3schools 中的這個例子正是我所需要的。在那里，以下腳本處理恰好一個硬編碼滑塊的更新：<body><h1>Custom Range Slider</h1><p>Drag the slider to display the current value.</p><div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> <p>Value: <span id="demo"></span></p></div><script>var slider = document.getElementById("myRange");var output = document.getElementById("demo");output.innerHTML = slider.value;slider.oninput = function() { output.innerHTML = this.value;}</script></body>問題是如果我向 HTML 頁面添加更多滑塊，我該如何概括該腳本？我不想為我在頁面中需要的每個滑塊都有一對滑塊和輸出和 oninput 函數(shù)。

查看完整描述

3 回答

慕萊塢森

TA貢獻1810條經(jīng)驗獲得超4個贊

這個怎么樣：

var elements = document.getElementsByClassName("slidecontainer");

elements.forEach(function(el){

var slider = el.getElementById("myRange");

var output = el.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {

output.innerHTML = this.value;

}

})

現(xiàn)在，對于您添加的每個滑塊，它都會起作用，這意味著您只需要添加具有相應類的 html

</head>

<body>

<h1>Custom Range Slider</h1>

<p>Drag the slider to display the current value.</p>

<p>Value: <span id="demo"></span></p>

</div>

<p>Value: <span id="demo"></span></p>

</div>

將產(chǎn)生兩個沒有額外聲明的工作滑塊。

所以我正在做的是尋找每個具有滑塊容器類的元素并遍歷每個元素。這樣對于具有該結(jié)構(gòu)的每個滑塊，您都會有一個滑塊。無需添加額外的 javascript 來引用每個滑塊

反對回復 2021-11-25

飲歌長嘯

TA貢獻1951條經(jīng)驗獲得超3個贊

將滑塊和輸出標簽作為參數(shù)來運行

function setSlider(slider, output){

var slider = document.getElementById(slider);

var output = document.getElementById(output);

output.innerHTML = slider.value;

slider.oninput = function() {

output.innerHTML = this.value;

}

setSlider("myRange1", "demo1")

setSlider("myRange2", "demo2")

<body>

<h1>Custom Range Slider</h1>

<p>Drag the slider to display the current value.</p>

<p>Value: <span id="demo1"></span></p>

</div>

<p>Value: <span id="demo2"></span></p>

</div>

</body>

反對回復 2021-11-25

MMMHUHU

TA貢獻1834條經(jīng)驗獲得超8個贊

您可以使用類名并定位容器元素，如下所示：

const containers = document.querySelectorAll(".slidecontainer");

for(let container of containers) {

const slider = container.querySelector(".slider");

const output = container.querySelector(".value");

output.innerHTML = slider.value;

slider.oninput = function() {

output.innerHTML = this.value;

}

<body>

<h1>Custom Range Slider</h1>

<p>Drag the slider to display the current value.</p>

<p>Value: <span class="value"></span></p>

</div>

<p>Value: <span class="value"></span></p>

</div>

<p>Value: <span class="value"></span></p>

</div>

反對回復 2021-11-25

3 回答
0 關注
308 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

Javascript將元素Id作為參數(shù)傳遞

Javascript將元素Id作為參數(shù)傳遞

3 回答

添加回答