我有一组div,我显示后,我点击一个选项从选择。数据选项在重新加载后保存,以保持选项处于选中状态。这是正确的,但问题是onreload,我想保存值div来显示它,但我不知道如何做到这一点:看:
这是我的div组:
<center>
<div>
<div class="opc" id="cerDiv" style="display:none;">
<div class="divTag" style="width: 350px;">
<p>
<span class="spanrojo">|</span>
<span class="spangris">Certificaciones</span>
<span class="spanrojo">|</span>
</p>
<form method="post" onsubmit="return captchaValidar(this)" action="@Url.Action("Pdf", "Home")">
<label for="solicitud">Solicitud: </label>
<input type="text" id="solicitud" minlength="5" maxlength="7" name="solicitud" placeholder="Ingrese la solicitud..." required
title="Sólo letras y números. Cantidad mínima de caracteres: 5. Cantidad máxima de caracteres: 7"
onkeypress="return validarCertificadosYSolicitudes(event)" autofocus>
<input class="buscar" type="submit" id="btn" value="Buscar" />
@if (ViewBag.Alert != null)
{
<div class="alert">
<span class="closebtn">×</span>
<strong>Providus informa: </strong>
<p>@ViewBag.Alert</p>
</div>
}
</form>
</div>
</div>
<div class="opc" id="cuoDiv" style="display:none;" >
<div style="width: 350px; ">
<p>
<span class="spanrojo">|</span>
<span class="spangris">Cuotas</span>
<span class="spanrojo">|</span>
</p>
</div>
<div class="divTag" style="width: 350px;">
<form id="frmCU" method="post" action="@Url.Action("DetalleCuota", "Cuotas")">
<label for="titulo">Título: </label>
<input type="number" id="titulo" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" name="titulo" maxlength="6" placeholder="Ingrese su título..." required
title="Sólo letras y números. Cantidad mínima de caracteres: 4. Cantidad máxima de caracteres: 5"
onkeypress="return cuotasYTitulos(event)" autofocus>
<input class="buscar" type="submit" id="btn" value="Buscar" />
@if (ViewBag.Alert != null)
{
<div class="alert">
<span class="closebtn">×</span>
<strong>Providus informa: </strong>
<p id="textoAlerta">@ViewBag.Alert</p>
</div>
}
</form>
</div>
</div>
</div>
</center>
字符串
这是我的选择:
<select id="sort-item" class="term">
<option data-sort="0">Elija una opción</option>
@foreach (var nivel in Model)
{
if (nivel.nivel == 0 || nivel.nivel == 1 || nivel.nivel == 2 || nivel.nivel == 7)
{
<option value="cerDiv" data-sort="1">Certificados</option>
<option value="cuoDiv" data-sort="2">Cuotas</option>
}
}
</select>
型
我的js文件中有一个this:
let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];
var div_status = JSON.parse(sessionStorage.getItem("div_status")) || [];
$(function () {
if (selItems) {
selItems.forEach(obj => {
const [k, v] = Object.entries(obj)[0]
$("#" + k).val(v)
})
}
$('.term').on("change", function () {
selItems = $('.term').map(function () {
return {
[this.id]: this.value
}
}).get();
console.log(selItems)
sessionStorage.setItem("SelItem", JSON.stringify(selItems));
saveDiv(this.value);
});
});
function saveDiv(div) {
div_status[div] = true;
sessionStorage.setItem("div_status", JSON.stringify(div_status));
}
window.onload = function () {
console.log(div_status);
Object.values(div_status).forEach(function (div) {
monstrarDiv(document.querySelector("#" + div))
});
}
function mostrarDiv(target) {
var opciones = document.getElementsByClassName('opc');
var tagt = document.getElementById(target);
var esVisible = tagt.style.display == 'block';
//hide all
for (var i = 0; i < opciones.length; i++) {
opciones[i].style.display = 'none';
}
//toggle actual
tagt.style.display = esVisible ? 'none' : 'block';
return false;
}
型
我尝试更改代码,但没有任何工作,因为我不知道如何调用值来显示div。
2条答案
按热度按时间zbwhf8kr1#
我在回答你最初的问题,就像编辑之前一样。
selItems
是一个数组,您的问题是这里所示的问题:https://jsfiddle.net/ax48kwpf/1/(不能在这里创建一个片段,因为stackoverflow出于安全原因不允许我与
sessionStorage
交互)。字符串
的数据
正如我们所看到的,我有一个很好的数组,它已经被转换成一个字符串。所以,我需要将String解码为数组。但是我怎么知道它是一个数组,我怎么确保每个数组都能被很好地处理呢?答案很简单我使用一种受控的通用方法将变量转换为字符串:
型
https://jsfiddle.net/ax48kwpf/2/的
的
我们可以看到它成功地转换回了数组。因此,我通过
JSON.stringify()
将变量转换为String,并通过JSON.parse()
将其转换回来,当然,总是传递适当的参数。5uzkadbs2#
您需要通过保存该值的相同键来恢复该值。
字符串
编辑:
因此,为了保存一些div id的可见性状态,可以在
sessionStorage
中存储一个数组或对象。型