Question

我有一个文本字段+按钮列表，可以动态呈现。用户单击按钮，单击按钮时我想控制输入字段。

我认为您可以执行以下操作：

    <input id="1"><button onclick="doSomething(1)">Something</button>
    <input id="2"><button onclick="doSomething(2)">Something</button>
    <!--...-->
    <input id="3"><button onclick="doSomething(3)">Something</button>

但是，想知道是否还有其他更复杂的解决方案，因为我正在修改的代码将一个匿名函数传递给onclick，而我无法像上述方法那样传递唯一的ID。

Answer 1

在大多数Java脚本中，这很容易实现。这里不需要jQuery开销。

let buttons = [...document.getElementsByClassName('inputbutton')]

function doSomething(i) {
  console.log(i);
}

for (const button of buttons) {
  button.addEventListener('click', (e) => {
    const i = e.target.previousSibling.id
    doSomething(i);
  })
}

<input id="1"><button class="inputbutton" type="button">Something</button>
<input id="2"><button  class="inputbutton" type="button">Something</button>
<!--...-->
<input id="3"><button  class="inputbutton" type="button">Something</button>

Answer 2

如果您像下面那样修改动态HTML并添加此jQuery，您将能够访问上一个输入字段的值。

var buttons = $(".inputs-and-buttons #button-after-input-field");
buttons.click(function() {
  console.log($(this).prev("input").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs-and-buttons">
  <input id="1" value="1"><button id="button-after-input-field">Something</button>
  <input id="2" value="2"><button id="button-after-input-field">Something</button>
  <!--...-->
  <input id="3" value="3"><button id="button-after-input-field">Something</button>
</div>

Answer 3

您可以为输入字段和带有索引或行号的按钮生成动态ID，也可以为行号添加自定义属性，如下所示。

您还可以为文本框和按钮生成具有特定ID的动态相关控件。例如txtFirstName_1，txtLastName_1，btnAdd_1。此处的文本框和按钮以其ID和下划线“ _” 之后的数字来区分。

$(function(){
// Register click on button
//here you can pass specific class name for button if all are have same functionality
$("button").click(function(e){
console.log(this);
var btnId=$(this).attr("id");
//console.log(btnId);
// Way 1
//Split btnId with "_"  e.g btn_1 will splited with ["btn","1"]
var rowIndex=btnId.split("_")[1];
console.log(btnId.split("_"),rowIndex);
$("#txt_"+rowIndex).val("Upate value by btn"+rowIndex); // Or fetch value

// Way 2 
// You can directly use custom attribute data-row and do your work
var rowIndex1=$(this).attr("data-row");//$(e).prop("data-row");
console.log(rowIndex1);
//$("#txt_"+rowIndex1).val("Upate value"); // Or fetch value
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txt_1" data-row="1"><button  id="btn_1" data-row="1">Something</button>
<input id="txt_2" data-row="2"><button  id="btn_2" data-row="2">Something</button>
<input id="txt_3" data-row="3"> <button  id="btn_3" data-row="3">Something</button>

如何使用按钮控制相关文本输入元素？

3 个答案: