使用 jQuery 触发单选按钮处理程序的正确方法
我有两个单选按钮。根据选中的按钮,我想在页面上显示或隐藏
<div>
。因此,我创建了这个处理程序。
$(function () {
$('input[name="Search.LatestOnly"]').on('change', function () {
if ($(this).val() == 'true')
$('#date-section').hide(400);
else
$('#date-section').show(400);
});
});
这很好用。但我想在页面加载时将
<div>
可见性设置为正确的状态,因此我添加了以下行:
$('input[name="Search.LatestOnly"]:checked').trigger();
这会产生对我来说毫无意义的运行时错误。
jQuery.Deferred exception: Cannot convert undefined or null to object TypeError: Cannot convert undefined or null to object at hasOwnProperty () at Object.trigger (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:70619) at HTMLInputElement. (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:72108) at Function.each (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:2976) at S.fn.init.each (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:1454) at S.fn.init.trigger (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:72084) at HTMLDocument. (https://localhost:44377/Data/Search:206:58) at e (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30005) at t (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30307) undefined S.Deferred.exceptionHook @ jquery.min.js:2 t @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 c @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 c @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 B @ jquery.min.js:2 jquery.min.js:2
Uncaught TypeError: Cannot convert undefined or null to object at hasOwnProperty () at Object.trigger (jquery.min.js:2) at HTMLInputElement. (jquery.min.js:2) at Function.each (jquery.min.js:2) at S.fn.init.each (jquery.min.js:2) at S.fn.init.trigger (jquery.min.js:2) at HTMLDocument. (Search:206) at e (jquery.min.js:2) at t (jquery.min.js:2)
谁能告诉我如何初始化 HTML,以便在页面加载后隐藏或显示
<div>
?
我真笨。我忘了包含事件的名称。
$('input[name="Search.LatestOnly"]:checked').trigger('change');
由于那里有一个完全没用的错误消息,我在一个非常愚蠢的错误上浪费了大量时间。
这是一个连接到单选输入的显示/隐藏的工作示例,它检查当前选中的值并立即运行,以及添加事件侦听器。希望这能为您自己的项目增加一些视角。不幸的是,如果无法重现错误,就很难提供更具体的建议。我总是很乐意与此答案分开查看您的项目。
我做了一件厚颜无耻的小事,我将单选的值设为所需的方法,只是为了减少通常必须编写条件来处理理解值的步骤。
$(() => {
const content = $("div");
const shown = $("input[name='test']:checked").val();
const handleShow = (method, t = 200) => content[method](t);
handleShow(shown, 0);
$("input").on("change", function () {
const shown = $(this).val();
handleShow(shown);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
conditional content
</div>
<label> Show
<input type="radio" name="test" value="show" checked>
</label>
<label> Hide
<input type="radio" name="test" value="hide">
</label>
我想我也会提供一个在原生 JavaScript 中实现此目标的示例,作为偶然发现此问题的其他人的资源。
对于此答案,需要记住两点,css 中 1rem 的最大高度并不适用于所有容器。您可以动态设置最大高度,或使用不可能达到的高度(这会影响动画)
这不会在首次启动时检查“已检查”的状态,它假定它在启动时始终具有相同的状态。
(() => {
const $ = str => [...document.querySelectorAll(str)];
const content = $("div")[0];
const radios = $("input[name='test']");
radios.forEach(radio => {
radio.addEventListener("input", e => {
const val = e.target.value;
if (val === "show") content.classList.remove("hidden");
else content.classList.add("hidden");
});
});
})();
div {
max-height: 1rem;
transition: max-height .2s;
overflow: hidden;
}
.hidden {
max-height: 0;
}
<div>
conditional content
</div>
<label> Show
<input type="radio" name="test" value="show" checked>
</label>
<label> Hide
<input type="radio" name="test" value="hide">
</label>