前提・実現したいこと
jqueryが思った動作をしないです。
該当のソースコード
<html lang="ja"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <head> <meta charset="UTF-8"> <title>HOMEPAGE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> nav { width: 312px; height: 100%; transition: all 0.2s; transform: translate(312px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #FFF; } nav.open { transform: translate(0); } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $('.btn_menu').click(function(){ var obj = $(this); $('nav').toggleClass('open'); $('h4, p').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $(this).show(); } else { $(this).hide(); } }); }); }); </script> <body> <section id="center"> <button type="button" class="btn_menu"> AAA </button> <button type="button" class="btn_menu"> BBB </button> <button type="button" class="btn_menu"> CCC </button> </section> <nav> <h2>HOMEPAGE</h2> <!----> <h4>AAA</h4> <p>dog</p> <!----> <h4>BBB</h4> <p>cat</p> <!----> <h4>CCC</h4> <p>rabbit</p> <!----> </nav> </body> </html>
というコードを書きました。AAA or BBB or CCCのボタンを押すと、
<h4>AAA</h4> <p>dog</p>
か
<h4>BBB</h4> <p>cat</p>
か
<h4>CCC</h4> <p>rabbit</p>
が表示されるようにしたいです。
今は、
試したこと
コードの実行。
js部分を
<script type="text/javascript"> $(document).ready(function(){ $('nav h4, nav p').hide(); $('.btn_menu').click(function(){ var obj = $(this); $('nav').toggleClass('open'); $('h4, p').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $(this).show(); } }); }); }); </script>
と書いたコードの実行。
追記
jquery部分を
<script type="text/javascript"> $(document).ready(function(){ $('.btn_menu').click(function(){ var obj = $(this); $('nav').toggleClass('open'); $('h4').each(function(){ if($.trim($(this).text().toLowerCase()) == $.trim(obj.text().toLowerCase())){ $('.jq').nextAll().show(); } else { $(this).hide(); } }); }); }); </script>
としhtmlを
<nav> <h2>HOMEPAGE</h2> <!----> <div class="jq"> <h4>AAA</h4> <p>dog</p> </div> <!----> <div class="jq"> <h4>BBB</h4> <p>cat</p> </div> <!----> <div class="jq"> <h4>CCC</h4> <p>rabbit</p> </div> <!----> </nav>
と変更したら、今度は
AAAボタンを押すとそれ以降のpタグが取得され、
BBBボタンを押すとAAAやCCCのpタグも取得されるという意図していない挙動になった。
$('.jq').nextAll().show(); とnextAll()メソッドを使い、<div class="jq">で囲まれた部分を取得したかった。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/02 03:41
2018/05/02 03:46
2018/05/02 04:09
2018/05/02 04:09
2018/05/02 04:12
2018/05/02 04:23
2018/05/02 04:23
2018/05/02 04:25 編集
2018/05/02 05:58
2018/05/02 06:14