根据条件禁用切换

Question

我正在尝试根据输入字段的值禁用切换功能。以下是标记

<ul>
  <li><input type="text" class="search" placeholder="Search..." id="search"></li>
  <li><button type="submit" id="search-submit"><span></span></button></li>
</ul>

最初，搜索输入的宽度设置为 0。单击提交按钮时，将添加一个切换类，该类将动画文本输入的宽度。如果文本输入中有任何值，单击提交按钮时它应该重定向到一个页面，但它不应该切换。我尝试了以下 javascript 但不知何故无法禁用切换。

$('.sm-search button').click(function () {
 $('.search').toggleClass('search-expand');
});
$('.search').on('change keyup paste', function () {
 if ($(this).val() != "") {
  $('.sm-search button').click(function () {
   window.location.href = "/some-url";
   $('.search').addClass('search-expand');
  });
 } 
});

Answer 1

您的 jQuery 选择器与您的 HTML 类不匹配，但这可能只是这里的一个问题。

这里发生的事情是：

您将多个 JS 侦听器添加到您的按钮，它们都已执行。如果你想要你的代码，你必须删除最初的“点击”监听器。

尝试：

$('.sm-search button').click(function () {
 $('.search').toggleClass('search-expand');
});
$('.search').on('change keyup paste', function () {
 if ($(this).val() != "") {
  $('.sm-search button').off('click').click(function () {
   window.location.href = "/some-url";
   $('.search').addClass('search-expand'); // this shouldn't be necessary anymore, since you do not toggle the class anymore
  });
 } else {
    $('.sm-search button').off('click').on('click', function () {
      $('.search').toggleClass('search-expand');
    });
 }
});