使用jQuery触发单选按钮处理程序的正确方法

Question

我有两个单选按钮。根据选中的是哪个，我希望在页面上显示或隐藏<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。延迟异常:不能将undefined或null转换为对象@ hasOwnProperty ()在对象。触发(https://localhost: 44377/lib/jquery/dist/jquery.min.js: 2:70619)在HTMLInputElement。(https://localhost: 44377/lib/jquery/dist/jquery.min.js: 2:72108)在函数。每个(https://localhost: 44377/lib/jquery/dist/jquery.min.js: 2:2976)网址:S.fn.init.each (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:1454)在s.f.n. init.trigger (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:72084)在HTMLDocument。(https://localhost: 44377/数据/搜索:206:58)网址:e (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30005)t (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30307)没有定义jquery.min.jsjquery.min.js:2setTimeout(异步)(匿名)@ jquery.min.jsC @ jquery.min.jsfireWith @ jquery.min.jsFire @ jquery.min.js:2C @ jquery.min.jsfireWith @ jquery.min.js准备@ jquery.min.jsB @ jquery.min.jsjquery.min.js: 2

Uncaught TypeError: Cannot convert undefined or null to object@ hasOwnProperty ()在对象。触发(jquery.min.js: 2)在HTMLInputElement。(jquery.min.js: 2)在函数。每个(jquery.min.js: 2)(jquery.min.js:2)(jquery.min.js:2)在HTMLDocument。(搜索:206)(jquery.min.js:2)(jquery.min.js:2)

谁能告诉我如何初始化我的HTML，使<div>是隐藏或显示一旦页面加载?

Answer 1

我真笨。我忘了写活动名称了

$('input[name="Search.LatestOnly"]:checked').trigger('change');

由于一个完全没有帮助的错误信息，我在一个非常愚蠢的错误上浪费了大量的时间。

Answer 2

下面是一个连接到无线电输入的显示/隐藏的工作示例，它检查当前已检查的值并立即运行，并添加事件侦听器。希望这能为您自己的项目增加一些视角。不幸的是，如果不能重现错误，就很难给出更具体的建议。我总是很乐意把你的项目和这个答案分开来看。

我做了一件厚脸皮的小事情，我把收音机的值作为期望的方法，只是为了减少我通常必须编写条件来处理理解值的步骤。

$(() => {
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>

Answer 3

我想我也会包括一个在香草javascript中实现这个目标的例子，作为其他任何人偶然遇到这个问题的资源。

这个答案需要记住两件事，css中的max-height为1rem并不适用于所有容器。你可以动态地设置最大高度，或者使用一些不可能的高度(这会影响动画)

这不会检查" checkness "的状态。在初始启动时，它假定它在启动时始终具有相同的状态。

(() => {
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>