javascript - 更改无法正常工作的复选框的属性

Question

我在不同的页面上有许多输入框，类型为密码。现在我有一个小复选框，上面写着“显示密码”，选中该复选框后，会将密码类型从密码更改为文本。简单吧？

现在，业内的一些天才决定，对于其中一个页面，他们希望按钮改为“隐藏密码”。但仅限于那一页。现在理论上来说，这工作正常，但发生的情况是，当我在包含“隐藏密码”的页面上时，当我“取消选中”复选框时，该字段仅从类型文本更改为密码。即我必须点击两次。我该如何解决这个问题？我知道这很简单，但它让我精神不振。

HTML:

<input type="checkbox" data-toggle-input="js-show-char-toggle" class="ml-small">Hide password
<input type="text" value="" class="js-show-char-toggle">

显示密码

jQuery:

$('input[data-toggle-input]').on('click', function() {
    var $self = $(this),
            inputToggleClass = $self.data('toggle-input'),
            inputType = $self.prop('checked') ? 'text' : 'password';        

        $('.' + inputToggleClass).prop('type', inputType);

    });

如果你尝试一下 fiddle ，你就会明白我的意思。如果您使用第一个复选框，则仅当您取消选中该复选框时，该字段才会“隐藏”。对于第二个来说效果很好。我做错了什么？

Answer 1

您应该能够在不同的输入中使用它:

$('input[data-toggle-input]').on('click', function () {
    $(this).next().prop('type', $(this).next().prop('type') == 'text' ? 'password' : 'text')
});

<强> jsFiddle example