将 php 密钥转换为 javascript 以进行日志记录

Question

我有一个 php 循环，可以正确显示我期望作为 html 标题的值。

我在这里要做的是为每一个创建一个隐藏输入，所以如果类别有 15 个标签，我想要 15 个隐藏输入。

下面的代码通过记录正确的信息“起作用”，但是，它只记录第一个。

显然，这是因为 php/html 循环分配了一个键，但 javascript 正在提取一个非唯一 ID。

如何正确地将这个键翻译成 javascript，以便记录所选项目的实际值，而不仅仅是第一个？

@foreach($items as $key => $item)

<h3 class="uk-width-4-10">{{$item->category}}</h3>
<input type="hidden" name="edit_category" id="edit_category" value="{{$item->category}}" />

@endforeach



function editCommentModal(){

console.log(document.getElementById("edit_category").value);

}

更新：

模态代码和包含 onclick 事件的 span 代码

@foreach($items as $key => $item)

<!-- display category and button -->
<h3 class="uk-width-4-10">{{$item->category}}</h3>
<a href="#edit-modal{{ $key }}" data-uk-modal><span onclick="editCommentModal()" class="uk-icon-plus-square"></span></a>


<!-- modal -->
<div id="edit-modal{{ $key }}" class="uk-modal edit-modal">

<h3 class="uk-width-4-10">{{$item->category}}</h3>
<input type="hidden" name="edit_category[]" id="edit_category" value="{{$item->category}}" />

</div>

@endforeach


function editCommentModal(){
 var inps = document.getElementsByName('edit_category[]');
 for (var i = 0; i <inps.length; i++) {
    var inp=inps[i];
    console.log("edit_category["+i+"].value="+inp.value);
 }
}

Answer 1

使用类而不是id，然后你可以按类找到它们，然后对它们做任何你想做的事情。

<input type="hidden" name="edit_category" class="edit_category" value="{{$item->category}}" />

document.getElementsByClassName('edit_category')

var categories = document.getElementsByClassName('edit_category');

Array.prototype.forEach.call(categories, function(category){
  console.log(category.value);
});

    <input type="hidden" name="edit_category" class="edit_category" value="a" />
    <input type="hidden" name="edit_category" class="edit_category" value="b" />
    <input type="hidden" name="edit_category" class="edit_category" value="c" />

    

Answer 2

@foreach($items as $key => $item)

<!-- display category and button -->
<h3 class="uk-width-4-10">{{$item->category}}</h3>
<a href="#edit-modal{{ $key }}" data-uk-modal><span onclick="editCommentModal({{ $key }})" class="uk-icon-plus-square"></span></a>


<!-- modal -->
<div id="edit-modal{{ $key }}" class="uk-modal edit-modal">

<h3 class="uk-width-4-10">{{$item->category}}</h3>
<input type="hidden" name="edit_category[]" id="{{ 'edit_category_' . $item->id }}" value="{{$item->category}}" />

</div>

@endforeach


function editCommentModal(id){
 var inps = document.getElementsByName('edit_category[]');
 for (var i = 0; i <inps.length; i++) {
    var inp=inps[i];
    if('edit_category_' + id == inp.id)
    {
      console.log("edit_category["+i+"].value="+inp.value);
    }
 }
}    

Answer 3

首先； id 应该是唯一的，所以我建议您将 id 更改为 class。要获取所有值，您可以将名称 edit_category 更改为输入数组 edit_category[]。如果您想添加更多隐藏的输入字段，您可以使用您在循环中获得的索引！

@foreach($items as $key => $item)
   <h3 class="uk-width-4-10">{{$item->category}}</h3>
   <input type="hidden" name="edit_category[]" class="edit_category" value="{{$item->category}}" />
@endforeach

function editCommentModal(){
    var all_categories = document.getElementsByName('edit_category[]');
    var all_names = document.getElementsByName('edit_names[]');
    for (var i = 0; i <all_categories.length; i++) {
        var category=all_categories[i];
        var name=all_names[i];
        console.log("edit_category["+i+"].value="+category.value);
        console.log("edit_names["+i+"].value="+name.value);
    }
}