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

Question

I am having a few issues outputting some array data. My array looks like the following

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"
  ]
]

So this array is passed to my view. What I am attempting to do is display the folder names (folder1, folder2) as select options. This part is pretty straight forward (using Blade templating engine)

<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>

The problem is that if for instance folder1 is selected from the select box, I then need to display the content of folder1 (4, 2, 1, 3, 5) as radio buttons. If folder2 is selected, it needs to display folder2's data as radio buttons. I would imagine Javascript is required to achieve this - the only thing I can think off is creating hidden divs and turning the on and off as a when is needed e.g.

@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

Controlled by

$( ".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');
    }
});

The problem I am finding with this approach is repeating the foreach loop within my view. Additionally, it is creating duplicate folder divs for some reason.

Given what I am attempting to do, what would be the best way to approach this?

Thanks

Answer 1

I would put the entire div inside each of your @foreach loop:

@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

This way it's only showing the div that matches the condition, instead of displaying two div's and filling the one that matches the condition