- ベストアンサー
jqueryの置き換えについて
- jqueryの導入や基本的な書き方がわかっているが、jsで書いた電卓をjqueryに置き換える際にエラーが出てしまう。
- 書き換え後のコードが欲しい。
- jsで書いた電卓は正常に動いていたが、jqueryに置き換えると動かない。
- katakakakaka
- お礼率11% (1/9)
- その他（プログラミング・開発）
- 回答数9
- ありがとう数3
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
補足です。 d=d!="0"? d+button_value:button_value; ここ。 今現在の 変数dが"0"の場合は、button_valueをそのまま代入 "0"以外の場合は、現在のdの後ろに、button_valueを結合しろ！ の意味になります。 if分で同じことを書くと if (d!="0") { d+=button_value; }else{ d=button_value; } という感じ。どうせ変数dしか使ってないなら、1行で済ませちゃえ！ のスタンスで、こうしてます。
その他の回答 (8)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
これね、途中でやめた理由があって。 ”0”+”5”なら、”5”にしてるつもりだと思うんだけど、 今現在の値が、 ”5ｘ”になってた時、”0”だと、”5ｘ0”になるでしょ。 なので、そのまま”２”をいれれば”5ｘ02”って感じで。。 結局、最初の１回目しか、制御できてないわけ。。 私なら、Array()にしますね。 data[0]="123"; data[1]="+-*/";がどれかが入る。 この状態で、”+-*/”を押すと、data[1]を入れ替える。。 なので、"123x" この状態で”+”を押すと、"123+"に変わる。 もし次の文字が、数字なら、 data[2]を作り、"0"で初期化する。 なので、ここで、”5”を入れれば、”0”+”5”先頭が0なので"5"と補正 の方が、良いかもな～って。 最後に"="を押したとき、このArrayをシリアライズ （直線データに戻す） で、今と同じように計算させる。 の方が、スマートかも～って考えてたらやる気がなくなったのね＾＾ ごめんねｗ
- AsarKingChang
- ベストアンサー率46% (3467/7474)
}else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { d=button_value; } }else{ ↑ ここ・・・めちゃくちゃだな＾＾ ただ、それっぽくは動いてるから、おそらく元々不要かもしれん
- AsarKingChang
- ベストアンサー率46% (3467/7474)
<script> $(function () { /* ボタンを押す毎にdisplayは変化しないので、最初に１回でいい */ let display = $('#display'); $(".command").on('click', function() { let button_value = $(this).data("value"); let d = display.text(); if (button_value === "Clear") { d="0"; }else if (button_value === "=") { let d2=d.replace(/÷/g,'/').replace(/×/g,'*'); d=new Function ("return " + d2)(); }else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { d=button_value; } }else{ if (isNaN(button_value)) { let migihashi = d.slice(-1); if (!isNaN(migihashi)) { d=d!="0"? d+button_value:button_value; } }else { d=d!="0"? d+button_value:button_value; } } display.text(d); }); }); </script> これじゃだめ？ だいぶ短くなっちゃったけど＾＾
補足
お早い回答ありがとうございます！！！！ すごい短く短縮されてて凄いです！！！ 自分のコードに取り組んで確認してみます！！！！ 本当にありがとうございます！
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>それが、全然ダメでした汗 あらら＾＾ 明日、時間があったら、書いてくれたソース 実行してみますよ！
補足
お時間取らせてしまってすみません泣 とてもお優しい方で本当にありがたいです！ 全然jqueryについて理解ができていないので、私も色々調べてやってみます！ お手数おかけいたしますが、よろしくお願いいたします！
- AsarKingChang
- ベストアンサー率46% (3467/7474)
ちなみ、完成しました？ 暇なとき、いじってもいいんですが。 すでに終わってたら、悲しいかな～と思って
補足
それが、全然ダメでした汗 指摘いただいたところはある程度わかる範囲で直してみたのですが、 数字や記号がディスプレイに１つしかでなく、計算もされていない、＝を押すとUnexpected identifier at new Function (<anonymous>)というエラーが起きてしまい、全然電卓として機能してません笑 現在までのHTMLとjqueryをお送りします！ｃｓｓは変わらないので端折ります！ HTML <body> <div class="calculator"> <div id="display" data-value="0">0</div> <div class="comm"> <div class="command is-2col" data-value="Clear">Clear</div> <div class="command empty"></div> <div class="command is-operator" data-value="÷">÷</div> <div class="command" data-value="7">7</div> <div class="command" data-value="8">8</div> <div class="command" data-value="9">9</div> <div class="command is-operator" data-value="×">×</div> <div class="command" data-value="4">4</div> <div class="command" data-value="5">5</div> <div class="command" data-value="6">6</div> <div class="command is-operator" data-value="-">ー</div> <div class="command" data-value="1">1</div> <div class="command" data-value="2">2</div> <div class="command" data-value="3">3</div> <div class="command is-operator" data-value="+">＋</div> <div class="command is-2col" data-value="00">00</div> <div class="command" data-value="0">0</div> <div class="command is-equal" data-value="=">＝</div> </div> </div> <body> jquery $(document).ready(function(){ //domが読み込まれたら中の処理を実行 $('.command').on('click',function() { let button_value = $(this).data('value'); console.log(button_value); let display = $('#display'); console.log(display); display.text(button_value); if (button_value === "clear") { display.text("0"); //押したのがclearなら、displayの中身がinnerHTMLで０に変わる }else if (button_value === "=") { //押したのが＝なら、displayの中身をnew funcで計算して値を返す replace_value = display.replaceAll("×", "*").replaceAll("÷", "/"); display.text(new Function ("return " + replace_value))(); //押されたキーの内容を判別せず、単純にそのまま文字列として記憶して、計算時に、そのまま文字列の計算結果を返すようにreturnの文字列を付け加える) }else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { display.html(button_value); } //ディスプレイに0か00が表示される時は、「0」「00」「記号」は押されても入れない //ただし、「数値」が押された時は入れるようする //!isNaN(button_value)で押されたのが「数値」かどうか判断できる //又はbutton_valueが−の時は-と表示する //数値が押された時だけresult.innerHTML = button_valueを実行 }else { if (isNaN(button_value)) { let migihashi = display.slice(-1); if (!isNaN(migihashi)) { display.text() += button_value; } }else { //$(display)[0].text() += button_value; } } //++など複数して出ないようにする //isNaN(button_value)で押されたのが記号か判断 //数値を入力した時は一番下のelseのdisplay.innerHTML += button_valueで数値を入力して終了 //isNaN(button_value)で押されたのが記号と判断した時、記号を入力する条件はディスプレイ右端が数値である必要がある //display.innerHTML.slice(-1)で右端の値を取って!isNaN(migihashi)で右端が数値か判断 //右端が数値、押されたのが記号の場合だけdisplay.innerHTML += button_valueで計算実行 }); });
- AsarKingChang
- ベストアンサー率46% (3467/7474)
まだ完成していませんが、今の時点で？と思った部分を あげておきます。 HTML部分 <div class="display" id="0">0</div> <div class="command is-2col" id="0">Clear</div> <div class="command" id="0">0</div> CSSのセレクタ名であるIDが重複して３回使われている。 <div class="command is-operator" id="÷">÷</div> CSSのセレクタ名としては、id="÷"はまずい。 Jqueryのデータフォーマットにしたほうがいいでしょうね。 JS部分 $("[class *='command']").on('click',function() { //"[class*='command']"の書き方をするとc指定したclassを全て取ってくる こんなことしなくても、 $(".command").on('click',function() { classは元々重複できるので、そのまま".command"でいい。 let replace_value = $('.command is-operator').each(function(){ これは、「クラス」command内にある「タグ」 is-operatorになるので、「クラス」is-operatorの方が適切。.is-operatorに書き換える。 なのだが、そもそもいらない気がするこの処理。 let display = $('.display');//id名 displayの要素を取得 変数displayに代入 その後オブジェクトに対して加減算をしてしまっている。 display += button_value; （さらに、全体にclass displayは１回しかないので、id=displayでいい）JSでのid=..は重複してないよ！って合図にもなるので、わかりやすくなるため。 おまけ、初期値が0 <div class="display" id="0">0</div> なので、例えば「５」を押すと、 ”0”+”5”＝”05”が画面に出てしまう。 などが気になってます。 ひとまず、値の埋め込みは、 <div class="command is-operator" data-value="÷">÷</div> <div class="command" data-value="7">7</div> こんな感じでHTMLに埋め込み $(".command").on('click',function() { let button_value = $(this).data("value"); こんな感じで、受け取るほうがよいでしょう。 これ、思ったより、トラップが多い！（わざと引っ掛かるように作られている問題に感じる）ので、 質問者さんじゃなくて、何かテスト問題かなと思うような、 そんな印象がちょっとありましたね。
補足
とても細かい直しありがとうございます涙 jsをjQueryに直すのは簡単で難しくないと言われたのですが、 単純に同じ意味の単語に書き換えるだけでは実装できず、なぜ簡単と言えるのだろうと思っていました、、。 とにかく、現段階までの修正してくださった所を早速直してみます！
- AsarKingChang
- ベストアンサー率46% (3467/7474)
質問者さんのタイプ（ソースの書き方）がわからないので、 >それを上から1行ずつ変えていくと未定義エラーが起きてしまったりしてどこがどう間違えているのかもわからないので、 エラーが出たら、また相談投げてもらえますか？ 私がソース書くと趣旨と変わる可能性が高いもので。 かなり独特なので＾＾私の書き方。MVC+Objectなもので。 私がわかる範囲では、修正しますよ。
補足
そうですよね汗すみません汗 現在なんとなく自分で途中まで書き換えたものが下記のものなのですが、 まず一つ目のエラーなんですが、=を押すと、Unexpected identifier new Function (<anonymous>)と言うエラーが出てしまいます。 なぜ出てしまうのかわからないです汗 何かわかれば教えていただきたいです！ html <body> <div class="calculator"> <div class="display" id="0">0</div> <div class="comm"> <div class="command is-2col" id="0">Clear</div> <div class="command empty"></div> <div class="command is-operator" id="÷">÷</div> <div class="command" id="7">7</div> <div class="command" id="8">8</div> <div class="command" id="9">9</div> <div class="command is-operator" id="÷">×</div> <div class="command" id="4">4</div> <div class="command" id="5">5</div> <div class="command" id="6">6</div> <div class="command is-operator" id="-">ー</div> <div class="command" id="1">1</div> <div class="command" id="2">2</div> <div class="command" id="3">3</div> <div class="command is-operator" id="+">＋</div> <div class="command is-2col" id="00">00</div> <div class="command" id="0">0</div> <div class="command is-equal" id="=">＝</div> </div> </div> <body> CSS .calculator { width: 205px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); margin: auto; } .display { width: 205px; background: #5b5b5b; text-align: right; border: 1px solid #000; box-sizing: border-box; color: #fff; font-size: 25px; padding: 5px 10px; } .display.flashing { animation-name: flash; animation-duration: 0.1s; } @keyframes flash { 0% { color: #5b5b5b; } 90% { color: #5b5b5b; } 100% { color: #fff; } } .comm { width: 204px; background: #000; display: flex; flex-wrap: wrap; padding-left: 1px; } .command { width: 50px; height: 45px; background: #ddd; margin: 0 1px 1px 0; text-align: center; padding-top: 10px; box-sizing: border-box; font-size: 18px; } .command.is-operator, .command.is-equal { background: orange; color: #fff; } .command.is-2col { width: 101px; } .command:active { background: #bbb; } .command.is-operator:active, .command.is-equal:active { background: #d37e00; } .command.empty:active { background: #ddd; } #debug { display: none; } jquery $(document).ready(function(){ //domが読み込まれたら中の処理を実行 $("[class *='command']").on('click',function() { //"[class*='command']"の書き方をするとc指定したclassを全て取ってくる //console.log($("[class *='command']")) let display = $('.display');//id名 displayの要素を取得 変数displayに代入 let button_value = $(this).attr('id'); //button_valueの変数に,"[class *='command']"のvalueを代入 display.text(button_value); if (button_value === "clear") { //押したのがclearなら、displayの中身がinnerHTMLで０に変わる //console.log(button_value === "clear") }else if (button_value === "=") { //押したのが＝なら、displayの中身をnew funcで計算して値を返す let replace_value = $('.command is-operator').each(function(){ let txt = $(this).html(); $(this).html( txt.replace(/÷/g,'/').replace(/×/g,'*') ); console.log(replace_value) }); display.html(new Function ("return " + replace_value))(); //押されたキーの内容を判別せず、単純にそのまま文字列として記憶して、計算時に、そのまま文字列の計算結果を返すようにreturnの文字列を付け加える) }else if (display === "0" || display === "00") { if (!isNaN(button_value) || button_value === "-") { display.html(button_value); } }else { if (isNaN(button_value)) { let migihashi = display.slice(-1); if (!isNaN(migihashi)) { display += button_value; } }else { display += button_value; //それ以外の動き +=はdisplay.innerHTML＝display.innerHTML＋button_valueの略し } } }); });
- AsarKingChang
- ベストアンサー率46% (3467/7474)
たったの1行で全部治ります！。 <script> $(function () { function calc_func(button) { // 省略 } window["calc_func"] = calc_func; ←これを追加するだけ！ }); </script> これで、グローバル空間に、calc_funcという名前が 出るので、onclickのリスナーから見えるようになり、 動作するという理屈です。
補足
すみません、説明不足でした汗 例えば、functionとかも＄つけたり、idやclassも＄で呼び出したり、innerHTMLなどがHTML()になったり、とにかくjqueryに変えられる所は全部変えなければいけなくて、、。 それを上から1行ずつ変えていくと未定義エラーが起きてしまったりしてどこがどう間違えているのかもわからないので、 その書き換えたコードを頂けたらと思っています汗
お礼
本当にご丁寧に何から何までありがとうございました泣 先ほど自分のコードに入れてみたら無事できました泣 本当に感謝です！！ ささやかですがチップも送らせていただきます！！ ありがとうございました！！！！！