尝试使用jQuery或Javascript在容器中获取输入的值

Question

我试图从mycontainerdiv内获得input值，当单击"单击我"div。

我只希望它发生，如果输入是一个password类型，我有这个到目前为止…

function myFunction(el) {
theInput = $(el).closest("input type=['password]").value();
console.log(theInput);
}

.mycontainer {
display: flex;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
<input type="text" value="myinput1">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="password" value="myinput2">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="number" value="22">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="password" value="myinput4">
<div onclick="myFunction(this)">Click Me</div>
</div>

每当我点击任何东西时都会抛出错误，我在哪里出错?

Answer 1

您的代码中有多个问题。首先你要找一个家长。输入不是父节点，而是兄弟节点。因此，您可以寻找closest()的共同父节点，然后寻找find()的输入，您可以使用siblings()，或者您可以使用prev()

第二个选择器查找输入属性是错误的。括号需要在整个属性周围，而不是在值周围。

第三，jQuery中没有.value()

function myFunction(el) {
const theInput = $(el).closest(".mycontainer").find('input[type="password"]');
if (theInput.length) {
console.log(theInput.val());
}
// other ways to reference the input
console.log($(el).siblings('input[type="password"]').val());
console.log($(el).prev('input[type="password"]').val());
}

.mycontainer {
display: flex;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
<input type="text" value="myinput1">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="password" value="myinput2">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="number" value="22">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="password" value="myinput4">
<div onclick="myFunction(this)">Click Me</div>
</div>

Answer 2

您的代码中有几个问题:

1. 选择器不正确。您应该首先以类mycontainer的最近元素为目标，并从中找到密码元素。由于属性选择器和输入元素是相同的，它们之间不应该有任何空格，而且属性(type)应该在[]内。

2. 你正在尝试使用value()在jQuery引用元素(不是jQuery方法)上访问值，应该使用val()

function myFunction(el) {
var theInput = $(el).closest(".mycontainer").find("input[type=password]").val();
console.log(theInput);
}

.mycontainer {
display: flex;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
<input type="text" value="myinput1">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="password" value="myinput2">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="number" value="22">
<div onclick="myFunction(this)">Click Me</div>
</div>
<div class="mycontainer">
<input type="password" value="myinput4">
<div onclick="myFunction(this)">Click Me</div>
</div>