javascript 如何使事件单击仅影响您正在单击的图标

fivyi3re 于 2023-04-19 发布在 Java

关注(0)|答案(1)|浏览(109)

Link to the form here我有一个具有显示/隐藏密码功能的表单，现在我希望在重复密码输入上有相同的功能，在两个都有一个眼睛打开/关闭的图标。问题是，当我点击密码时，显示（并打开眼睛）也发生在重复密码图标上。
是不是影响功能，这已经工作，因为是不是相同的功能，但即时通讯无法使它只对图标，你点击，因为它有相同的名称，我不能改变它。
我试图更改图标的名称，但这些图标不能命名为不同的（他们上传到一个库，如果你改变名称，它dissapear）。
我的代码是：

`function revealPass() {
    document.getElementById("password").setAttribute("type", "text");
    $(".icon-ojo-abierto").removeClass("d-none");
    $(".icon-ojo-cerrado").addClass("d-none");
}

function hidePass() {
    document.getElementById("password").setAttribute("type", "password");
    $(".icon-ojo-cerrado").removeClass("d-none");
    $(".icon-ojo-abierto").addClass("d-none");
}

function revealPass2() {
    document.getElementById("passwordConfirmation").setAttribute("type", "text");
    $(".icon-ojo-abierto").removeClass("d-none");
    $(".icon-ojo-cerrado").addClass("d-none");
}

function hidePass2() {
    document.getElementById("passwordConfirmation").setAttribute("type", "password");
    $(".icon-ojo-cerrado").removeClass("d-none");
    $(".icon-ojo-abierto").addClass("d-none");
}`

JavaScript

来源：https://stackoverflow.com/questions/76014682/how-to-make-an-event-click-only-affect-the-icon-that-you-are-clicking

1条答案

按热度按时间

oknwwptz1#

这将选择类为“icon-ojo-abierto”的 all 元素，即使您只需要某个输入字段旁边的图标：

$(".icon-ojo-abierto").removeClass("d-none");

你没有发布你的HTML，所以我们只能猜测它的结构，但假设它看起来像这样......

<form>
  <div class="row">
    <input id="password" type="password" />
    <span class="icon-ojo-abierto"></span>
    <span class="icon-ojo-cerrado d-none"></span>
  </div>
  <div class="row">
    <input id="passwordConfirmation" type="password" />
    <span class="icon-ojo-abierto"></span>
    <span class="icon-ojo-cerrado d-none"></span>
  </div>
</form>

...您应该能够选择相关的图标，如下所示：

function revealPass() {
    document.getElementById("password").setAttribute("type", "text");
    const iconAbierto = document.querySelector('#password ~ .icon-ojo-abierto');
    iconAbierto.classList.remove('d-none');
    const iconCerrado = document.querySelector('#password ~ .icon-ojo-cerrado');
    iconCerrado.classList.add('d-none');
}

这里的关键是使用一个选择器，它只匹配你需要的元素。在我的例子中，我使用了一般的兄弟组合子，只选择.icon-ojo-abierto，如果有一个#password作为它的兄弟。

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 如何使事件单击仅影响您正在单击的图标

1条答案

相关问题

热门标签

最新问答