これで飯食っている人なら何を今更、だと思うんですけど。。。
CSS selector と JavaScript の覚書です。
昨日ボヤいた Walmart のサイトデザインが変わって、印刷した inovice のレイアウトが悲惨なことになったという件ですが、一括ダウンロードする際に、CSS を編集して保存していました。
そうすると、サイトの構成が変わったら、また一からダウンロードしなおさないといけないので、このやり方はまずいなと。そこで、ダウンロードは素のままで、それをローカルで開いた時に JavaScript で CSS を後から細工することにしました。
やることは、document.querySelector('#target').style.display = 'none' 的な感じなんですが。
まず最初のお題は、いくつかのアイテムをまとめて注文した場合、返品ボタンとかが複数表示されて、それも印刷されてしまうので まとめて 消したい、です。
先に結論を書きます。
document.querySelectorAll('.product-button-groups').forEach(e => { e.style.display = 'none'; });
ボタンは、product-button-groups というクラスなので、querySelectorAll まとめてひっかけます。
ここまではいいんですが、querySelectorAll で戻ってきた NodeList をどう回していくかというのが問題です。
ありがとう、エラい人。
自分は美しさが気に入りましたよ。
IE なにそれですし。
今までだったら、for で回すところです。
美しくないけど、何やっているかは明らかだし、ちゃんと動くし。
どういえばいいんでしょうか、便秘で溜まったものが一気に出たというか、そういうスッキリ感です。
便秘になったことはないんですけどね。
スッキリしたところ、次のお題です。
先にコードから書いちゃいます。
document.querySelectorAll('[data-automation-id=gc-payment-details] tr:nth-child(n+2)').forEach(e => { e.style.display = 'none'; });
支払い内容の表示なんですけど、table になっていて、普通はカードで払ってそれでおしまいなので、最初の tr に Total が、次の tr にカード番号が入ってきます。
ところがどっこい、最近、ギフトカードがバンドルされたお買い得商品をよく買うもので、買った以上使うわけですが、1 度に 5 枚まで使えるので、そこにさらに 5 件のカード番号が表示されて、もうトイレットペーパー占いで引き出された便所神の如く、だらだらと長いインボイスになってしまうので、2 番目以降には消えてもらおうってわけですよ。
:nth-child(n+2) でまとめてひっかけ、スッキリ。
forEach でまとめて消して、スッキリ。
ダブルスッキリ。
ダブルといえば、JB64 ですがオーディオレスなのでヘッドユニットを買わないといけないのですが、日本だと 2 DIN っていうじゃないですか。アメリカだと、double DIN といいます。
それで、ナビはもっぱらスマホのを使っているので Apple Car Play に対応していて、そのほかの下らない機能、ナビはさておき DVD だとかの光学ドライブといったもう 10 年は使っていないものがなくて、シンプルで安いものを探していたんです。
Amazon.com 売れ筋 No.1 が Sony XAV-AX1000 です。
これ、物理的なボリュームがあるし、前に USB コネクタがあるんですよ。
なもんで、USB メモリを挿すのも楽。
そして何よりも安い。
注文しようと思ったら、日本に直接出荷してくれるセラーさんが品切れしてしまいました。
それと crutchfield で適合を確認したかったんですが、そもそも SUZUKI が存在しなかったです。JB23 の情報でもあれば、付くかどうかくらいはわかると思ったんですが、JB23 を置いておけば、XAV-AX1000 単体を輸入して、動作確認をした上で、配線キットなどは JB23 と JB64 との差分で行けると判断できましたが。
なんにせよ、段取りが悪すぎました。
ステアリングリモコンに対応しているし、純正でも良かったんですけど、それはそれで、面白くないので Alpine の DAF9, フローティングビッグDA を買いました。
しかし、クソ高かったなぁ。。。
その割に、DAF9 もそうだし、純正の DA も、XAV-AX1000 も、Bluetooth 機能はあるんですが、Apple Car Play に関していえば、有線で接続しないとダメなんです。
Mini の場合、乗ると勝手に Bluetooth でペアリングして、勝手に音楽の再生（レジューム）がはじまります。
何もしないでいいんですよ。
センターには Qi の充電機能付きホルダがありますから、XR 以外だったら、そこにセットできます。
自分も 5 号も XR だからセットできませんけど。
なので、それが当たり前だと思っていたのですが、随分と完成度が低い気がしますね。
あと、「ビッグだ」なんて、安直な名前だと思ってたんですけど、
DA = ディスプレイオーディオだったんですね。。。
スッキリと言えば、愛媛の愛すべきクソ CM 企業、たかだ引越センターさんですよ。
スッキリする（？）CM を全国の皆々様にみていただきたいところなんですが、なんと非公開になってしまいました。
ネタバレするので、一応伏せ字にしときますけど。。。
逆に、全くスッキリしないのがコレ。
なんなんですが、このブ男は！
外人さんたちも激おこデス！
なかには、
ひっこシコシコしたかだ
という突っ込みまで入る始末。。。
えっと、なんの話でしたっけ？
CSS selector の話でした。
まあ、ここを見ろで終わってしまう話でもあるんですが。。。
それで、消えてもらう場合ですが、CSS selector でやる場合は、
visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。
の違いがあって、見えなくする（場所は確保されている）のと、全くない場合と 2 パターンあるので、レイアウトの崩れ具合によりどっちがいいってのは変わるわけです。
ところで、querySelector でひっかけた要素に完全に消えてもらう場合、どうするのかという話です。
child.parentNode.removeChild(child); しないといけない。
[document.querySelector].forEach(e => { e.parentNode.removeChild(e); }) みたいな？
これだと e に代入しているから同じだし、まあ All よりも [] で一文字減ったというかなんというか。
逆に、querySelector だと、引っかかる要素がなかったときに、null が戻るもんだから、引っ掛からなかったらそこでエラーが起こって後の処理が中断されてしまうんです。
TypeError: null is not an object (evaluating 'document.querySelector('foo').style')
まあ、それはそれで、Knuth がエラーが起こると塗りつぶして文章を書きなさせるように、不都合を無かったことにしないほうがいいのかなとも思うんですが。
try { /* some stuffs here */ } catch { document.body.style.backgroundColor = 'red' }
この作業自体がとても美しくないことに起因している対症療法であるわけで、適当に済ませておこうと思います。