Q&A
勉強不足でした。
ご回答ありがとうございました！
前提・実現したいこと
商品の価格を表示する際、0円のときは価格そのものを非表示にしてしまいたい。
0以外の価格が入っているときは表示したい。
という仕様を作りたいと思っています。
発生している問題・エラーメッセージ
該当する1つめの価格にしか反映されないこと。
同じクラス名の数だけ繰り返したいのですが、2件目以降に反映されません。
該当のソースコード
jQuery
1<script type="text/javascript"> 2$(function(){ 3 4var place = document.querySelector('.place'); 5 6$('.place').each(function(){ 7 8if(place.innerHTML==0) { 9document.querySelector('.dis').style.display = 'none'; 10} else { 11document.querySelector('.dis').style.display = 'inline'; 12} 13 14}); 15 16}); 17</script>
<div class="dis"> 価格 <p><span class="place">0</span>円(税別)</p> </div> <div class="dis"> 価格 <p><span class="place">0</span>円(税別)</p> </div> <div class="dis"> 価格 <p><span class="place">2511</span>円(税別)</p> </div>
補足情報（FW/ツールのバージョンなど）
plaseの数字が0の時（価格が0円のとき）、
disのクラス毎非表示にしたいです。
そして、それをdisのクラス名の数だけ繰り返したいです。
jQuery、Javascriptともに知識が初心者レベルで、調べつつ行っています。
それも限界となり、こちらで相談させていただきました。
回答3件
0
ベストアンサー
$(function(){ があるということは jQueryを利用していると判断したので、jQuery 記法で記述しました。
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div class="dis"> 9 価格 10 <p><span class="place">0</span>円(税別)</p> 11 </div> 12 13 <div class="dis"> 14 価格 15 <p><span class="place">0</span>円(税別)</p> 16 </div> 17 18 <div class="dis"> 19 価格 20 <p><span class="place">2511</span>円(税別)</p> 21 </div> 22 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 23 <script type="text/javascript"> 24 $(function () { 25 $(".dis .place").each(function () { 26 if ($(this).text() === '0') { 27 $(this).parents('.dis').hide(); 28 } 29 }); 30 }); 31 </script> 32 </body> 33</html>
投稿2018/07/10 06:17
退会済みユーザー
総合スコア0
0
querySelector ではなく querySelectorAll を使用してください。
https://codepen.io/og24715/pen/oMNjzJ?editors=1010
js
1diss = document.querySelectorAll('.dis'); 2 3[...diss].map(dis => { 4 place = dis.querySelector('.place'); 5 if(Number(place.innerText) === 0) { 6 dis.style.display = 'none' 7 } 8})
投稿2018/07/10 06:18
編集2018/07/10 06:32
総合スコア832
0
javascript
1$(function () { 2 $(".dis").filter(function(){ 3 return $(this).find('.place').text()==0; 4 }).hide(); 5});
投稿2018/07/10 06:27
編集2018/07/10 06:27
総合スコア114835
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。