dstxpei5823
2016-07-14 16:38
浏览 40
已采纳

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

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

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • duanpai1920 2016-07-14 17:00
    最佳回答

    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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题