根据按钮元素层次结构位置收集输入值

Question

我实际的html代码：

<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="<?php echo $adminData->name; ?>">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="<?php echo $adminData->email; ?>">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>

我有多个这样的面板，每个面板都有一个具有特定ID的按钮。我的目标是收集面板中按下按钮的所有输入。虽然这听起来很简单，但我的主要目标是在具有多个面板的多个页面上重用相同的功能(因为结构相似(，然后使用ajax更新信息。我唯一需要提供的功能是按钮的id，这样它就可以自动找到相对输入。我试图在vanillajs中实现这一点，尽管我可以使用jquery。

我实际的js代码：

document.getElementById('savePersInfo').onclick = function(){
var inputArray = ['adminName', 'adminEmail'];
console.log(collectInfo(inputArray));
};
function collectInfo(inputArray){
$inputValueArray = []
for(var c = 0; c < inputArray.length; c++){
$inputValueArray[c] = document.querySelectorAll('[name="' + inputArray[c] + '"]')[0].value;
}
return $inputValueArray;
}

正如你在这里看到的，我需要指定输入的名称才能检索它，我想要的是不要这样做，让JS根据点击的面板自动找到它。

关于如何做到这一点，有什么建议/想法吗？

ps：忽略内联样式和其他布局的东西，早期开发阶段。

Answer 1

您可以使用javasscript的closest()或jQuery的closest()，使用它们可以找到与button和input最接近的元素，例如panel-body。

然后，您只需使用该元素作为起点，例如使用javascriptelement.querySelectorAll(，然后选择所有inputs并获取其值。

注意，如果要使用javascript版本并支持IE(它不知道closest()(，可以使用我在末尾添加的"polyfill">

根据一条注释更新，我在"javascript"代码示例中添加了checkbox和select，以显示它也能与这些代码一起使用，以及如何获取按钮id。

堆栈片段-javascript

document.querySelectorAll('button').forEach( function(btn) {
btn.addEventListener('click', findInputs);
})
function findInputs() {  
console.clear();

var button_id = this.id;

this.closest('.panel-body').querySelectorAll('input, select').forEach( function(inp) {
var test_checked = ((inp.type == 'checkbox' && inp.checked) ? ' checked' : '');
console.log(button_id, inp.value + test_checked)
})
}

<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Test</span>
<input type="checkbox" name="adminTest" class="form-control" value="test 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Test 2</span>
<select name="adminTest2" class="form-control">
<option value="Test2-a">Test2-a</option>
<option selected value="Test2-b">Test2-b</option>
<option value="Test2-c">Test2-c</option>
</select>
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>

---

堆栈片段-jQuery

$('button').each( function() {
$(this).click(findInputs);
})
function findInputs() {
$(this).closest('.panel-body').find('input').each( function() {
console.log( $(this).val() );
})
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 1">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal 2
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 2">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 2">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo2">Guardar Alteração 2</button>
</div>
</div>
</div>

---

为IE9+添加javascriptclosest()支持

if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector || 
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest)
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1); 
return null;
};

Src：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Answer 2

您可以在传递了id的元素上使用Element.closest()来定位您要查找的面板。然后使用Array.prototype.map()返回所选面板的所有输入值。

尝试以下方式：

document.getElementById('savePersInfo').onclick = function(){
console.log(collectInfo(this.id));
};
function collectInfo(id){
var panel = document.getElementById(id).closest(".panel.panel-primary")
var $inputValueArray = [...panel.querySelectorAll('input[type=text]')].map(i => i.value);
return $inputValueArray;
}

<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="John Michale Kane">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="[e-mail]">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>