Javascript到Jquery转换的一些变化

Question

我想修改javascript代码，但我不太了解javascript。谁能把这段代码转换成jquery?感谢任何帮助

var myButton = document.getElementsByName('show-pass-btn');
var myInput = document.getElementsByName('show-pass-input');
myButton.forEach(function (element, index) {
element.onclick = function () {
'use strict';
if (myInput[index].type == 'password') {
myInput[index].setAttribute('type', 'text');
element.firstChild.textContent = 'Hide';
element.firstChild.className = "";
} else {
myInput[index].setAttribute('type', 'password');
element.firstChild.textContent = 'Show';
element.firstChild.className = "";
}
}
})

HTML

<input
type="password"
value="<?php echo $user_password; ?>"
name="show-pass-input"
class="form-control-plaintext readonly"
>
<button
type="button"
name="show-pass-btn"
class="btn btn-link btn-xs"
>
Show
</button> 

Answer 1

没有嵌套的html按钮，所以没有firstChild

jQuery

$('[name=show-pass-btn]').on("click", function() { 
const $password = $(this).closest(".commonContainer").find('[name=show-pass-input]');
const isPassword = $password.is(":password");
$password.attr('type', isPassword ? 'text' : 'password');
$(this).text(isPassword ? 'Hide' : 'Show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="commonContainer">
<input type="password" value="" name="show-pass-input" class="form-control-plaintext readonly">
<button type="button" name="show-pass-btn" class="btn btn-link btn-xs">Show</button> 
</div>
<div class="commonContainer">
<input type="password" value="" name="show-pass-input" class="form-control-plaintext readonly">
<button type="button" name="show-pass-btn" class="btn btn-link btn-xs">Show</button> 
</div>

香草,

document.getElementById("fieldContainer").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches("[name=show-pass-btn]")) return // not a button
const passwordField = tgt.closest('.commonContainer').querySelector("[name=show-pass-input]");
const isPassword = passwordField.type === "password";
passwordField.type = isPassword ? 'text' : 'password';
tgt.textContent = isPassword ? 'Hide' : 'Show';
})

<div id="fieldContainer">
<div class="commonContainer">
<input type="password" value="" name="show-pass-input" class="form-control-plaintext readonly">
<button type="button" name="show-pass-btn" class="btn btn-link btn-xs">Show</button>
</div>
<div class="commonContainer">
<input type="password" value="" name="show-pass-input" class="form-control-plaintext readonly">
<button type="button" name="show-pass-btn" class="btn btn-link btn-xs">Show</button>
</div>
</div>

如果你能保证按钮在字段的右边，我们可以这样做:

$('[name=show-pass-btn]').on("click", function() {
const $password = $(this).prev();
const isPassword = $password.is(":password");
$password.attr('type', isPassword ? 'text' : 'password');
$(this).text(isPassword ? 'Hide' : 'Show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" value="" name="show-pass-input" class="form-control-plaintext readonly">
<button type="button" name="show-pass-btn" class="btn btn-link btn-xs">Show</button>
<input type="password" value="" name="show-pass-input" class="form-control-plaintext readonly">
<button type="button" name="show-pass-btn" class="btn btn-link btn-xs">Show</button>