当两个输入都有值时如何向元素添加类答案

【问题标题】：How to add class to an element when both inputs have value当两个输入都有值时如何向元素添加类
【发布时间】：2021-04-03 00:10:14
【问题描述】：

当 search_box_name 和 search_box_id 类的两个输入都具有任何值时，我想向元素 go_back_right 添加一个活动类。我曾尝试参考该平台上已有的答案，但我没有运气，因为我是 js 新手。有什么帮助吗？

.go_back_right:active {
  background-color: rgba(255, 0, 0, 0.05);
  animation: status 4s ease forwards;
}

<div class="search_box_container">
  <input class="search_box_name" id="search_bar username" for="username" name="username" type="text">
  <input class="search_box_id" id="search_bar roomNamehtml" name="room" type="text">
</div>

【问题讨论】：

:active 不是一个类。你可能只想要.active和$(".go_back_right").addClass("active")
@freedomn-m 检查里面是否有值的条件怎么样？
哦...谢谢！它现在正在工作。
@m4n0 去吧

标签： javascript html jquery css

【解决方案1】：

下面是 jQuery sn-p 设置添加/删除类的事件

$(document).ready(function () {
    setEvents();
    $('.search_box_container').trigger('change');
});
function setEvents() {
    $('.search_box_container').on('change', 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');
        }
    });
}

【讨论】：

它可以工作，但是，我必须单击屏幕上的某个位置才能使其工作。一旦两个输入都获得价值，有什么方法可以让它工作？
@DenisKviatkovskij 将.on('change') 事件更新为.on('keyup')，并将trigger('change') 更新为trigger('keyup')。它会立即起作用
完美运行！谢谢

【解决方案2】：

我想你想为类.go_back_right 的元素添加一个额外的类，对吧？如果是这样，请将其添加到您的 JS 文件中：

const searchBoxName = document.getElementByClassName('search_box_name');
const searchBoxId = document.getElementByClassName('search_box_id');
const goBackRight = document.getElementByClassName('.go_back_right');

const addClass = () => {
  if (searchBoxName && searchBoxName.value && searchBoxId && searchBoxId.value) {
    goBackRight.classList.add('active');
  }
}

addClass()

阅读this、this 和this 了解更多信息，顺便说一句，您不能有两个或多个具有相同ID 的元素，例如您在两个输入中的search_bar id。

【讨论】：

【解决方案3】：

function setClass() {
  if (document.querySelector(".search_box_name").value != "" && document.querySelector(".search_box_id").value != "") {
    document.querySelector(".go_back_right").setActive();
  } else {
    document.querySelector(".go_back_right").setActive(false);
  }
}
setClass();

.go_back_right:active {
  background-color: rgba(255, 0, 0, 0.05);
  animation: status 4s ease forwards;
}

<div class="search_box_container">
  <input oninput="setClass()" class="search_box_name" id="search_bar username" for="username" name="username" type="text">
  <input oninput="setClass()" class="search_box_id" id="search_bar roomNamehtml" name="room" type="text">
</div>

【讨论】：

您的 css :active 与类 .active 不匹配。你的 sn-p 给了Uncaught TypeError: Cannot read property 'setAttribute' of null。
有效，但是，我希望在输入值后立即显示更改。无需单击屏幕上的某个位置。
我在 oninput 上更改了 onchange