[英]How do I get the text into local storage on slide of range slider?
我正在使用范圍滑塊。 滑動時,圖像和短語會發生變化。
滑動分為三個階段。 滑動時,短語和圖像會發生變化。 每次更改時,該短語和圖像都應保存到本地存儲。 那就是問題所在。
我的html代碼是:
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="container">
<div id="sliderOutput">
<div class="col-4">
<h6 class="display-6 mt-3"><b><center>Starting From Scratch</center></b></h6>
<p class="demo"><center>I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6 mt-3"><b>Somewhere in Between</b></h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6 mt-3"><b>Mostly Furnished</b></h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
我的 CSS 代碼是:
<style>
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
#sliderOutput>div {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
</style>
我的JS代碼是:
<script>
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
</script>
滑動時,圖像和短語會發生變化。 我對更改短語和圖像路徑的要求應存儲在本地存儲中。
你們能幫幫我嗎?
將上次存儲的圖片路徑和滑塊編號放入localStorage並使用
<script>
window.addEventListener('load', function() {
var imagePath = "../static/images/";
var localStorageSliderNumber;
var localStorageImagePath;
if (window.localStorage.getItem('sliderValue') != null) {
localStorageSliderNumber =
window.localStorage.getItem('sliderValue');
} else {
window.localStorage.setItem('sliderValue', '1');
localStorageSliderNumber = 1;
}
if (window.localStorage.getItem('imagePath') != null) {
imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
}
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
window.localStorage.setItem('sliderValue', rangeslider.getAttribute('value'));
window.localStorage.setItem('imagePath', (i+1));
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.