在视图中输出数组数据并通过 Javascript 进行控制

Question

我在输出一些数组数据时遇到了一些问题。我的数组如下所示

array:2 [▼
  "folder1" => array:5 [▼
    0 => "4.png"
    1 => "2.png"
    2 => "1.png"
    3 => "3.png"
    4 => "5.png"
  ]
  "folder2" => array:5 [▼
    0 => "2.png"
    1 => "3.png"
    2 => "4.png"
    3 => "1.png"
    4 => "5.png"
  ]
]

所以这个数组传递到我的视图。我想要做的是将文件夹名称（folder1、folder2）显示为 select 选项。这部分非常简单（使用 Blade 模板引擎）

<div class="row">
    <div class="col-md-7">
        @if(!empty($fileData))
            <select class="folderName" name="folderName">
                @foreach($fileData as $folder => $files)
                    <option value="{{ $folder }}">{{ $folder }}</option>
                @endforeach
            </select>
        @endif
    </div>
</div>

问题是，例如，如果 folder1 是从 select 框中 select 编辑的，那么我需要将 folder1 (4, 2, 1, 3, 5) 的内容显示为单选按钮。如果 folder2 是 selected，它需要将 folder2 的数据显示为单选按钮。我想 Javascript 是实现这一点所必需的——我唯一能想到的就是创建隐藏的 div 并打开和关闭作为需要的时候，例如

@foreach($fileData as $folder => $files)
    <div id="folder1">
        @if($folder == 'folder1')
            @foreach($files as $image)
                <div class="radio">
                    <label><input type="radio" name="optradio">{{ $image }}</label>
                </div>
            @endforeach
        @endif
    </div>
    <div id="folder2">
        @if($folder == 'folder2')
            @foreach($files as $image)
                <div class="radio">
                    <label><input type="radio" name="optradio2">{{ $image }}</label>
                </div>
            @endforeach
        @endif
    </div>
@endforeach

由

控制

$( ".folderName" ).change(function() {
    if($(this).val() == 'folder1') {
        $('#folder1').css('display', 'block');
        $('#folder2').css('display', 'none');
    }
    else if ($(this).val() == 'folder2') {
        $('#folder2').css('display', 'block');
        $('#folder1').css('display', 'none');
    }
});

我发现这种方法的问题是在我的视图中重复 foreach 循环。此外，出于某种原因，它正在创建重复的文件夹 div。

考虑到我正在尝试做的事情，解决这个问题的最佳方法是什么？

谢谢

Answer 1

我会将整个 div 放入每个 @foreach 循环中：

@foreach($fileData as $folder => $files)

    @if($folder == 'folder1')
        <div id="folder1">
            @foreach($files as $image)
                <div class="radio">
                    <label><input type="radio" name="optradio">{{ $image }}</label>
                </div>
            @endforeach
        </div>
    @endif

    @if($folder == 'folder2')
        <div id="folder2">
            @foreach($files as $image)
                <div class="radio">
                    <label><input type="radio" name="optradio2">{{ $image }}</label>
                </div>
            @endforeach
        </div>
    @endif

@endforeach

这样只显示符合条件的div，而不是显示两个div并填充符合条件的

在视图中输出数组数据并通过 Javascript 进行控制

Outputting array data within view and controlling via Javascript

javascript

php

arrays

jquery

laravel-5.1