Laravel HTML Jquery 通过选择图像输入总是return 最高值？

Question

我有这个html代码

<div class="gallery__item set-bg">
<img class="card-img-top" src="{{asset($template->image_path)}}" alt="" data-value="image-value">
<input type="hidden" id="image-value" name="selected_image" value="{{$template->id}}">
</div>

渲染到这个 html

<img class="card-img-top highlighted" src="http://someurl.test/templates//1 (14).jpg" alt="" data-value="image-value">
<input type="hidden" id="image-value" name="selected_image" value="6">
</div>

我用这个jquery

$('#select-form img').click(function() {
// Set the form value
$('#image-value').val($(this).attr('data-value'));

// Unhighlight all the images
$('#select-form img').removeClass('highlighted');

// Highlight the newly selected image
$(this).addClass('highlighted');
});
</script>

这是我的 laravel 函数

 // post template data
    public function postTemplate(Request $request)
    {
        $selected_image = $request->selected_image;
        dd($selected_image);

    }

问题是$selected_image总是获取页面中的最高值，我做错了什么？以及如何解决这个问题？谢谢

注意：html 上的值在单击时已按预期更改

任何线索都会有所帮助..

Answer 1

问题是您的页面上有多个 selected_image 输入。您还必须使用适当的 ID 填充图像的 data-value 属性。当用户单击图像时，jQuery 代码读取所选图像的 data-value 属性并将 selected_image 字段的 value 设置为该 ID。

根据您的 jQuery 脚本，您的代码应如下所示：

<!-- Don't forget to modify the form's action attribute if necessary -->
<form id="select-form" method="POST" action="/template">
    {{ csrf_field() }}
    <!-- Put selected_image outside of the loop -->
    <input type="hidden" id="image-value" name="selected_image" value="">

    @foreach ($templates as $template)
        <div class="gallery__item set-bg">
            <img class="card-img-top" src="{{asset($template->image_path)}}" alt="" data-value="{{$template->id}}">
        </div>
    @endforeach

    <button type="submit">Submit</button>

</form>

希望对您有所帮助。

Answer 2

根据 Andras 的回答，我只是稍微编辑了一下，就可以了

@csrf

            @foreach ($templates as $template)
            <div class="col-lg-4 col-md-6 col-sm-6 mix story_f">
                <div class="gallery__item set-bg">
                    <img class="card-img-top" src="{{asset($template->image_path)}}" alt="" data-value="{{$template->id}}">
                </div>
            </div>
            @endforeach
            <input type="hidden" id="image-value" name="selected_image" value="{{$template->id}}">
        </div>
        <div class="text-center">
            <button type="submit" class="site-btn">Preview Template</button>
        </div>
        </form>

Laravel HTML Jquery 通过选择图像输入总是return 最高值？

Laravel HTML Jquery input by selecting image always return the highest value?

html

javascript

jquery

laravel

laravel-blade