javascript - 在 View 中输出数组数据并通过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"
  ]
]

所以这个数组被传递到我的 View 中。我试图做的是将文件夹名称(folder1、folder2)显示为选择选项。这部分非常简单(使用 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，那么我需要将folder1(4、2、1、3、5)的内容显示为单选按钮。如果选择了folder2，则需要将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');
    }
});

我发现这种方法的问题是在我的 View 中重复 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并填充符合条件的div