开发者问题收集

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

2021-10-15
160

我有两个单选按钮。根据选中的按钮,我想在页面上显示或隐藏 <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>

3个回答

我真笨。我忘了包含事件的名称。

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

由于那里有一个完全没用的错误消息,我在一个非常愚蠢的错误上浪费了大量时间。

Jonathan Wood
2021-10-15

这是一个连接到单选输入的显示/隐藏的工作示例,它检查当前选中的值并立即运行,以及添加事件侦听器。希望这能为您自己的项目增加一些视角。不幸的是,如果无法重现错误,就很难提供更具体的建议。我总是很乐意与此答案分开查看您的项目。

我做了一件厚颜无耻的小事,我将单选的值设为所需的方法,只是为了减少通常必须编写条件来处理理解值的步骤。

$(() => {
  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>
async await
2021-10-15

我想我也会提供一个在原生 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>
async await
2021-10-15