gpt4 book ai didi

javascript - 如何获取动态创建的 slider 的值?

转载 作者:行者123 更新时间:2023-12-02 23:29:29 25 4
gpt4 key购买 nike

我一直在创建一个具有字母表值(a-z)的 slider ,当我移动 slider 时它会给出一个值,但是当我单击按钮创建第二个 slider 并移动第二个 slider 时它会保持打开状态给出第一个 slider 的 te 值。

<div id="target"></div>
</div>
<script>
// Creating the Alphabet Array

var allTheLetters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
"Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
];
var sliderParent = document.getElementById("target");
var createSlider = document.createElement("input");
var createTextInput = document.createElement("input");

// Creating Letter Inputfield
createTextInput.type = "text";
createTextInput.style.display = "block";
sliderParent.appendChild(createTextInput);
// End Creating letter inputfield

// Creating button

var button = document.createElement("button");
var sliderButtonId = document.getElementById("sliderButton");
button.style.display = "block";
button.id = "sliderButton";
button.innerHTML = "Add new letter";

// End creating Button


// Creating slider and displaying it to the DOM


createSlider.type = "range";
createSlider.style.display = "block";
createSlider.min = 0;
createSlider.max = allTheLetters.length - 1;
createSlider.defaultValue = 0;
sliderParent.appendChild(createSlider);
sliderParent.appendChild(button);

// adding Eventlistner to clickbuttton
document.addEventListener('click', function(e) {
if (e.target && e.target.id == 'sliderButton') {
return newSlider();
}
});
// End adding eventlistener to clickbutton

// Get the current value of the slider
function getMySliderResults() {

var sliderResult = createSlider.value;
var theLetterIWant = allTheLetters[sliderResult];
console.log(theLetterIWant);
return theLetterIWant;


}


// End getting the current value of the slider


// Add eventlistener to the change of the slider

document.addEventListener('change', function(event) {
if (event.target.querySelectorAll("#target > input")) {
return getMySliderResults();

}
});
// End of adding eventlistener to the change of the slider

function newSlider() {
var sliderParent = document.getElementById("target");
var createSlider = document.createElement("input");
createSlider.type = "range";
createSlider.style.display = "block";
createSlider.min = 0;
createSlider.max = allTheLetters.length - 1;
createSlider.defaultValue = 0;
sliderParent.appendChild(createSlider);
sliderParent.appendChild(button);
}
</script>

第一个 slider 的值必须显示在文本输入中,然后当我创建第二个 slider 时,该值必须添加到文本输入中第一个 slider 的后面。这必须可以无限次。

最佳答案

根据@Alon Yampolski的回答,我完成了作业 xD fiddleDemo

我所做的:我为每个 slider 分配了一个唯一的 ID,以便知道哪个 slider 发生了更改。基于此,我创建了一个数组来保存每个 slider 的值,每次更改 slider 时,数组中的值都会更改。

例如:我有 2 个 slider ,因此数组将包含 2 个元素。如果我更改第一个 slider 值,数组中的第一个元素将具有新值

slider 1 value - E
slider 2 value - D
array will have ["E","D"]

// after the change

slider 1 value - O
slider 2 value - D
array will have ["O","D"]

每次添加新 slider 时,都会重建数组

then when I create a second slider that value must be added behind the first one in the text input.

为了满足此要求,我反转了整个字符串,因此输出将是 array.ToString() 反转的

如果有不清楚的地方请告诉我。

var allTheLetters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
"Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
var sliderParent = document.getElementById("target");
var createSlider = document.createElement("input");
var createTextInput = document.createElement("input");
var sliderIndex = 0;
var arrOfLetters=[];


createSlider.className = "mySlider";
createSlider.id= "slider_0";



// Creating Letter Inputfield
createTextInput.id = "myInput"
createTextInput.type = "text";
createTextInput.style.display = "block";
sliderParent.appendChild(createTextInput);

// Creating button
var button = document.createElement("button");
var sliderButtonId = document.getElementById("sliderButton");
button.style.display = "block";
button.id = "sliderButton";
button.innerHTML = "Add new letter";


// Creating slider and displaying it to the DOM
createSlider.type = "range";
createSlider.style.display = "block";
createSlider.min = 0;
createSlider.max = allTheLetters.length - 1;
createSlider.defaultValue = 0;
sliderParent.appendChild(createSlider);
sliderParent.appendChild(button);

// adding Eventlistner to clickbuttton
document.addEventListener('click', function (e) {
if (e.target && e.target.id == 'sliderButton') {
sliderIndex++;

// create an unique id for each slider with sliderIndex increased
newSlider(sliderIndex);

arrOfLetters.length = 0;
var mySliders = document.querySelectorAll(".mySlider")
//create an array which will refelct values from each slider
mySliders.forEach((input) => {
arrOfLetters.push(getMySliderResults(input.value));

});

}
});

// Get the current value of the slider
function getMySliderResults(sliderValue){
var theLetterIWant = allTheLetters[sliderValue];
return theLetterIWant;
}


// Add eventlistener to the change of the slider
document.addEventListener('change', function (event) {

//get the slider number based on id. ex: if event.target.id is slider_1 noOfSlider will be 1
var noOfSlider = event.target.id.replace(/[^0-9]/g, '')
//change the array element at specified position.. ex: because the first slider was changed, we will change the first number from array
arrOfLetters[Number(noOfSlider)] = getMySliderResults(event.target.value);

// make array as a string with the commas replaced
var myString = arrOfLetters.toString().replace(/,/g , "")
console.log("string in the top-down slider order: " + myString);

// reverse string
var reversedString = myString.split('').reverse().join('');

document.getElementById("myInput").value = reversedString;

});


// End of adding eventlistener to the change of the slider
function newSlider(sliderID) {
var sliderParent = document.getElementById("target");
var createSlider = document.createElement("input");
createSlider.id = "slider_" + sliderID;
createSlider.className = "mySlider"
createSlider.type = "range";
createSlider.style.display = "block";
createSlider.min = 0;
createSlider.max = allTheLetters.length - 1;
createSlider.defaultValue = 0;
sliderParent.appendChild(createSlider);
sliderParent.appendChild(button);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="target"></div>
</div>

关于javascript - 如何获取动态创建的 slider 的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56576063/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com