為什么 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

不是主要問題，只是為函數保留不同的名稱。