为什么 jQuery 功能不能一起工作？

Question

我是 jQuery 的新手，当不同的输入具有值时，我的功能会将 class 激活到按钮。 但是，两件作品中只有一件 function 同时工作。 这两个功能分别工作得很好。 也许我错过了什么？ 我在没有document.ready的情况下直接在 html 文件上编写了这些函数，但这并没有解决问题。 有没有办法让这两个功能同时工作？

 $(document).ready(function() { setEvents(); $('.search_box_container').trigger('keyup'); }); function setEvents() { $('.search_box_container').on('keyup', function() { var $this = $(this), search_box_name = $this.find('.search_box_name').val().trim(), search_box_id = $this.find('.search_box_id').val().trim(); if (search_box_name && search_box_id) { $('.go_back_right').addClass('active'); } else { $('.go_back_right').removeClass('active'); } }); }; $(document).ready(function() { setEvents(); $('.didesnis_input').trigger('keyup'); }); function setEvents() { $('.didesnis_input').on('keyup', function() { var $this = $(this), search_box = $this.find('.search_box').val().trim(); if (search_box) { $('.go_back_right_create').addClass('active'); } else { $('.go_back_right_create').removeClass('active'); } }); }

 .go_back_right.active { background-color: rgba(255, 255, 255, 0.05); animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }.go_back_right_create.active { background-color: red; animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }

 <form action="room.html"> <div class="search_box_container"> <input class="search_box_name" id="username" for="username" name="username" type="text"> <input class="search_box_id" id="roomNamehtml" name="room" type="text"> </div> <button class="go_back_right" type="submit" onclick="joinRoom()"> </button> </form> <form action="room.html"> <div class="didesnis_input"> <input class="search_box" id="search_bar username" name="username" type="text"> </div> <select hidden name="room" id="room"> </select> <button class="go_back_right_create" type="submit" onclick="createRoom()"> </button> </form>

Answer 1

也许你可以给函数起不同的名字，因为第二个会覆盖第一个？

如果您不使用捆绑程序，请始终在使用函数之前定义它们。

此外，您不需要多次定义document.ready 。

function setEventsForInput() {
  $('.didesnis_input').on('keyup', function() {
    var $this = $(this),
      search_box = $this.find('.search_box').val().trim();
    if (search_box) {
      $('.go_back_right_create').addClass('active');
    } else {
      $('.go_back_right_create').removeClass('active');
    }
  });
}

function setEventsForBoxContainer() {
  $('.search_box_container').on('keyup', function() {
    var $this = $(this),
      search_box_name = $this.find('.search_box_name').val().trim(),
      search_box_id = $this.find('.search_box_id').val().trim();
    if (search_box_name && search_box_id) {
      $('.go_back_right').addClass('active');
    } else {
      $('.go_back_right').removeClass('active');
    }
  });
};


$(document).ready(function() {
  setEventsForInput();
  setEventsForBoxContainer();
});

Answer 2

您需要为您的函数指定唯一的名称。 否则，一个 function 定义正在重新定义（替换）另一个。 在这种情况下，您有两个名为setEvents的函数。 我已重命名这些setEvents1和setEvents2 ：

 $(document).ready(function() { setEvents1(); $('.search_box_container').trigger('keyup'); }); function setEvents1() { $('.search_box_container').on('keyup', function() { var $this = $(this), search_box_name = $this.find('.search_box_name').val().trim(), search_box_id = $this.find('.search_box_id').val().trim(); if (search_box_name && search_box_id) { $('.go_back_right').addClass('active'); } else { $('.go_back_right').removeClass('active'); } }); }; $(document).ready(function() { setEvents2(); $('.didesnis_input').trigger('keyup'); }); function setEvents2() { $('.didesnis_input').on('keyup', function() { var $this = $(this), search_box = $this.find('.search_box').val().trim(); if (search_box) { $('.go_back_right_create').addClass('active'); } else { $('.go_back_right_create').removeClass('active'); } }); }

 .go_back_right.active { background-color: rgba(255, 255, 255, 0.05); animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }.go_back_right_create.active { background-color: red; animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 2s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="room.html"> <div class="search_box_container"> <input class="search_box_name" id="username" for="username" name="username" type="text"> <input class="search_box_id" id="roomNamehtml" name="room" type="text"> </div> <button class="go_back_right" type="submit" onclick="joinRoom()"> </button> </form> <form action="room.html"> <div class="didesnis_input"> <input class="search_box" id="search_bar username" name="username" type="text"> </div> <select hidden name="room" id="room"> </select> <button class="go_back_right_create" type="submit" onclick="createRoom()"> </button> </form>

Answer 3

不是主要问题，只是为函数保留不同的名称。