从<a>标记内部的按钮呼叫路由

Question

我对laravel和Javascript是个新手。

我有一条路线，看起来像

Route::get('/problems/{problem}/edit', 'AdminController@editProblem');

我的页面看起来像image

此页面的HTML代码为

@foreach($in_contest->problems as $problem)
    <div class="list-group">
        <a href="#" class="list-group-item">
            <i class="fa fa-file fa-lg"></i>
            {{ $problem->title }}
            <span class="pull-right">
                <button onclick="callRoute()" class="btn btn-xs btn-info button">Edit</button>
            </span>
        </a>
    </div>
@endforeach

我为这个onclick编写了javascript代码

<script type="text/javascript">
    function callRoute() {
        window.location = '{{ url('/problems/' . $problem->id . '/edit') }}';
    }
</script>

现在，每当我在P1、P2或P3上点击编辑按钮时，它都会打开P4的编辑页面。同样的url正在为所有人打开。我希望当我单击P1上的编辑时，它会重定向到带有P1的$problem-id的编辑页面。其他人也一样。

这个问题的解决方案是什么？

Answer 1

它调用p4的原因是，在运行了foreach循环之后，基本上是将问题ID的最后一次迭代写入到javascript中。

您可以通过将视图代码更改为以下代码来避免将刀片语法全部添加到javascript中，以便将当前问题ID传递给javascript函数

@foreach($in_contest->problems as $problem)
    <div class="list-group">
        <a href="#" class="list-group-item">
            <i class="fa fa-file fa-lg"></i>
            {{ $problem->title }}
            <span class="pull-right">
                <button onclick="callRoute({{ $problem->id }})" class="btn btn-xs btn-info button">Edit</button>
            </span>
        </a>
    </div>
@endforeach

并将javascript函数添加到以下代码中

<script type="text/javascript">
    function callRoute(problemID) {
        window.location = '/problems/' + problemID + '/edit';
    }
</script>

Answer 2

页面中有4个结果，而callRoute函数在循环之外，所以循环完成后，它的工作就是在脚本标记中访问的变量$problem是对结果集合进行迭代的最后一个变量，所以这就是为什么它的id为4

只需简单地写成

<button onclick="callRoute({{ $problem->id }})" class="btn btn-xs btn-info button">Edit</button>

在你的脚本中

function callRoute(problem_id) {
    window.location = '/problems/' + problem_id + '/edit';
}