Question

我的Laravel刀片引擎中有这个For-each循环，我正在尝试使用按钮单击事件将ID和名称传递给我的Javascript函数，并将其记录到控制台，

逻辑：以附加图片为例（1.）单击添加按钮后，A点的学生将转到B点（2.）一旦删除按钮单击A点的学生，就会从B点移除并返回A点 SimpleDateFormat patterns documentation

现在，到目前为止，我一直在尝试使用console.log将学生的姓名和ID记录到控制台，但问题是只有第一个学生的ID会出来。例如，如果我单击学生3 = id为1，则没有获得学生的真实ID。我该如何处理？实现我的目标的最佳建议是什么？

代码

@foreach($students as $std)
        <input id="myInput"  type="button" value="{{$std->name}}" onclick="addRow()">
        @endforeach

function addRow() {
    var inputVal = document.getElementById("myInput").value;
    console.log(inputVal);  
}

Answer 1

将数据属性添加到您的输入字段，并在onclick（）上获取它们。这是data attribute documentation。

使用Jquery的代码

@foreach($students as $std)
    <input id="myInput"  type="button" data-name="{{$std->name}}" data-id="{{$std->id}}" value="{{$std->name}}" onclick="addRow(this)">
@endforeach

function addRow(ele) 
{
    var name= $(ele).attr('data-name');
    var id= $(ele).attr('data-id');
    console.log(name);  
    console.log(id);  
}

Answer 2

第一个从循环ID中删除的ID必须是唯一的

第二个可以作为函数参数传递

@foreach($students as $std)
        <input   type="button" value="{{$std->name}}" onclick="addRow({{$std->name}})">
        @endforeach

function addRow(inputVal) {
    console.log(inputVal);  
}

更多解决方案，但需要 jQuery

@foreach($students as $std)
        <input   type="button" value="{{$std->name}}" onclick="addRow(this)">
        @endforeach

function addRow() {
    var inputVal  = $(this).value;
    console.log(inputVal);  
}

Answer 3

标记中的重复ID是问题。如果根本不需要Id，则删除attr Id并在函数addRow中。

使用功能addEventListener

以下方法使用属性名称选择输入，然后绑定单击事件。

如您所见，在处理程序内部，我们可以按以下方式访问输入的值：var inputVal = this.value;

Array.from(document.querySelectorAll("[name='myInput']")).forEach(i => {
  i.addEventListener("click", function(e) {
    var inputVal = this.value;
    console.log(inputVal);  
  });
});

<input name="myInput"  type="button" value="{{$std->name1}}">
<input name="myInput"  type="button" value="{{$std->name2}}">
<input name="myInput"  type="button" value="{{$std->name3}}">

处理程序中this的值是对该元素的引用。

Answer 4

每个元素只能有一个ID，但实际上可以有更多多于一个班级。

您的问题是您为所有按钮使用了相同的ID。接下来，您是否要在addRow函数中调用dom元素，而Js无法清楚地找到您想获取的dom value是什么。为了解决这个问题，您的代码应如下所示。

纯JS

@foreach($students as $std)
        <input  class="myInput"  type="button" value="{{$std->name}}" onclick="addRow({{$std->name}})">
@endforeach

function addRow(inputVal) {
    console.log(id);  
}

JQUERY

// html

@foreach($students as $std)
    <input  class="myInput"  type="button" value="{{$std->name}}">
@endforeach



// your script

$('.myInput').click(function() {
     console.log(this.val())
});

从laravel balde获取foreach循环的值，并将其传递给javascript函数

4 个答案: