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）作为选择选项。这部分非常简单（使用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');
    }
});

我发现这种方法的问题是在我的视图中重复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

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

1 个答案: