質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

874閲覧

JSを使ってタスク表示、非表示機能を作りたい

extend06

総合スコア6

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/21 11:43

Laravelを使ってTodoリストを作っています。
今、現在タスク表示、非表示機能を作っています。(全て、作業中、完了のラジオボタンごと表示を切り替える)
PHPを使っての実装はできたのですが、JSを使うと良いとアドバイスを受け同じような処理が実装できずに悩んでいます。
・PHPを使ったやり方

php

1 <label><input type="radio" name="all" value="0" onclick="location.href='/todos'" {{$checked0}}>すべて</label> 2 <label><input type="radio" name="task" value="1" onclick="location.href='/todos/task'" {{$checked1}}>作業中</label> 3 <label><input type="radio" name="radio" value="2" onclick="location.href='/todos/finish'" {{$checked2}}>完了</label>

php

1public function index(Request $request) 2 { 3 $items = Todo::all(); 4 5 $data = [ 6 'checked0' => 'checked', 7 'checked1' => '', 8 'checked2' => '' 9 ]; 10 11 return view('todo.index', ['items' => $items], $data); 12 } 13 14 public function task(Request $request) 15 { 16 $items = Todo::where('status', 0)->get(); 17 $data = [ 18 'checked0' => '', 19 'checked1' => 'checked', 20 'checked2' => '' 21 ]; 22 return view('todo.index', ['items' => $items], $data); 23 } 24 25 public function finish(Request $request) 26 { 27 $items = Todo::where('status', 1)->get(); 28 $data = [ 29 'checked0' => '', 30 'checked1' => '', 31 'checked2' => 'checked' 32 ]; 33 return view('todo.index', ['items' => $items], $data); 34 }

この処理をJavaScriptを使って、作業中のラジオボタンがチェックされたら「作業中」のデータのみをループで回すという処理がしたいです。
一応JavaScriptでここまで書いてみたのですが、ここからの処理に悩んでいます。

JavaScript

1let elements = document.getElementsByName('select'); 2 3if(elments[0].checked) { 4 document.location.href = "/todos"; 5} 6 7if(elements[1].checked) { 8 9} 10 11if(elements[2].checked) { 12 13}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

「JSを使うと良い」とは
「表示の切り替えはサーバ通信なしでクライアントサイドだけでやると良い」(=見た目だけ変えると良い)
という意味じゃないでしょうか?
(既に onclick="location.href=~" でJS使ってますし)

リストのタグ構成がわからないですが
リストの各行にclassで「作業中(task)」「完了(finish)」の印をつけておいて
JSで切りかえるイメージです。

サンプルコードはこんな感じです。(めんどくさいのでjQuery使いました)

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 2 3<script> 4$(function(){ 5 // ラジオボタンがクリックされたときの処理 6 $('input[name="status"]').click(function(){ 7 if ($(this).val() == '1') { // クリックされたラジオボタンが「作業中」 8 $('.task').show(); // classが「task」の要素を表示 9 $('.finish').hide(); // classが「finish」の要素を隠す 10 } 11 else if ($(this).val() == '2') { // クリックされたラジオボタンが「完了」 12 $('.task').hide(); // classが「task」の要素を隠す 13 $('.finish').show(); // classが「finish」の要素を表示 14 } 15 else { // クリックされたラジオボタンが「すべて」 16 $('.task').show(); // classが「task」の要素を表示 17 $('.finish').show(); // classが「finish」の要素を表示 18 } 19 }); 20}); 21</script> 22 23<div> 24 <label><input type="radio" name="status" value="0">すべて</label> 25 <label><input type="radio" name="status" value="1">作業中</label> 26 <label><input type="radio" name="status" value="2">完了</label> 27</div> 28 29<div> 30 <div class="finish">[完了]手を洗う</div> 31 <div class="finish">[完了]うがいをする</div> 32 <div class="task">[作業中]消毒をする</div> 33 <div class="task">[作業中]マスクをする</div> 34</div>

投稿2020/06/21 18:43

shun-K

総合スコア508

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

extend06

2020/06/22 07:40

回答ありがとうございます。 アドバイスを参考にやってみます!
hentaiman

2020/06/22 08:12

リロードした時に戻ってしまってもいいのかな?
extend06

2020/06/22 09:01

リロードした時に戻っても大丈夫です! ①各ラジオボタンを格納したプロパティ②各タスク状況ボタンを格納したプロパティ③タスク切り替えるメソッド →この3つの構成で実装することが出来るとアドバイスを頂いたのですが、JSが不慣れで苦戦中です泣
hentaiman

2020/06/22 10:17

そのアドバイスの仕方だと会社の先輩から教えてもらったの?教えてくれた人は実際にサンプルコード作れる人なの?作れる人なら実際に作って見せてもらってコードの説明もしてもらった方がいいよ もし会社関係無い(というかコード作って教えてくれない)他人からのアドバイスだとしたら教え方が意地悪過ぎると思う
hentaiman

2020/06/22 10:21

作れない人からのアドバイスだったら(教えてくれた人が)論外なので、アドバイスはスルーしていつかjavascriptに慣れて使いこなせるようになった頃に改めて再実装を試すのが良いと思う
extend06

2020/06/23 09:31

コメントありがとうございます。 仕事としてではなく、エンジニアを目指して勉強しています。 メンターさんに勉強を見てもらっている形です。 Todoリストを作ってみるという課題を行なっているのですが、laravelのコントローラーを使うやり方よりもJSを組み込んでやった方がいいそうなのでチャレンジしています。 JSはドットインストールで少しやったことがあります。メンターさんにも質問し調べながらやってはいるのですが知識がなさすぎて思ったような処理にならない感じです。
hentaiman

2020/06/23 10:11

それ聞いちゃうと無償なこちらとしては気持ち的にアドバイスし兼ねますが、メンターのアドバイスの仕方が酷過ぎますのでメンター変えられるなら変えてもらった方が良いと思いますよ 意地悪なのかレベルが低くてまともな指導が出来ないのか知らないけど、今割り当てられている有料メンターさんはレベル低過ぎると思うわ
extend06

2020/06/23 10:20

失礼なことをしてしまい、申し訳ありません。 今現在、ここの回答で頂いているshun-Kさんのアドバイスを基に作成しています。 皆さんの貴重なお時間を無償で相談に乗っていただき、本当にありがとうございます。 hentaimanさんも心配してくださって、本当にありがとうございます。
guest

0

自己解決

無事解決することができましたので、ご報告させていただきます。
コードは、下記になります。

php

1@section('content') 2<form id="choice"> 3 <label><input type="radio" name="select" value="0" onclick="change();" checked>すべて</label> 4 <label><input type="radio" name="select" value="1" onclick="change();">作業中</label> 5 <label><input type="radio" name="select" value="2" onclick="change();">完了</label> 6</form> 7 <table> 8 <thead> 9 <tr> 10 <th>ID</th> 11 <th>コメント</th> 12 <th>状態</th> 13 </tr> 14 </thead> 15 <tbody> 16 @foreach($items as $item) 17 <tr class="tasks"> 18 <td>{{$loop->iteration}}</td> 19 <td>{{$item->title}}</td> 20 <form id ="task" action="/todos/boolean/{{$item->id}}" method="post"> 21 @csrf 22 @if($item->status === 0) 23 <td><input class="unCompleted" name="task_btn" type="submit" value="作業中"></td> 24 <input type="hidden" name="status" value="1"> 25 @else 26 <td><input class="completed" name="task_btn" type="submit" value="完了"></td> 27 <input type="hidden" name="status" value="0"> 28 @endif 29 </form> 30 <td> 31 <form action="/todos/{{$item->id}}" method="post"> 32 @csrf 33 <input type="hidden" name="id" value="{{$item->id}}"> 34 <input type="submit" value="削除"> 35 </form> 36 </td> 37 </tr> 38 @endforeach 39 </tbody> 40 </table>

JavaScript

1 2function change() { 3radio = document.getElementsByName('select'); 4console.log(radio); 5let completes = document.querySelectorAll('.completed'); 6console.log(completes); 7let unCompletes = document.querySelectorAll('.unCompleted'); 8console.log(unCompletes); 9let tasks = document.querySelectorAll('.tasks'); 10 11 12 if(radio[1].checked) { 13 unCompletes.forEach(item => { 14 item.closest('.tasks').style.display = ""; 15 }); 16 completes.forEach(item => { 17 item.closest('.tasks').style.display = "none"; 18 }); 19 } else if(radio[2].checked) { 20 unCompletes.forEach(item => { 21 item.closest('.tasks').style.display = "none"; 22 }); 23 completes.forEach(item => { 24 item.closest('.tasks').style.display = ""; 25 }); 26 } else if(radio[0].checked) { 27 tasks.forEach(item => { 28 item.closest('.tasks').style.display = ""; 29 }); 30 } 31} 32 33

投稿2020/06/26 14:08

extend06

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問