在視圖內輸出數組數據並通過Javascript進行控制

我在輸出一些數組數據時遇到了一些問題。我的陣列看起來像下面在視圖內輸出數組數據並通過Javascript進行控制

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）作爲選擇選項。這部分是相當直截了當（使用刀片模板引擎）

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

的問題是，如果例如文件夾1，從選擇框選擇的，然後我需要顯示的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。

鑑於我正在嘗試做什麼，最好的方法是什麼？

感謝

來源

2016-07-14 kate_hudson

我會把整個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一個匹配條件

來源

2016-07-14 17:00:41

在視圖內輸出數組數據並通過Javascript進行控制

回答

相關問題