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

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

ただいまの
回答率

90.03%

Javascriptでパラメータを取得して条件判定したいです。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 576

clovers

score 4

初心者です。

以下のアコーディオンメニュー(各ページのサイドに設置)を、リンクをクリックした時に、リンク先でURLに特定のパラメータを付与して、クリックしたグループのものだけ開いている(メニューが開いている)状態にしたいです。
(例、menu1-1をクリック後、category1はリンク先で開いたまま。他のcategoryは閉じている。)

カテゴリー1(リンクメニュー数:3)、カテゴリー2(リンクメニュー数:18)
カテゴリー3(リンクメニュー数:6)、カテゴリー4(リンクメニュー数:3)
カテゴリー5(リンクメニュー数:5)、カテゴリー6(リンクメニュー数:3)
カテゴリー7(リンクメニュー数:2)、カテゴリー8(リンクメニュー数:18)です。

カテゴリー毎にパラメータの数を変えて付与し、
URLで「?menu=1」~「?menu=8」が表示されているのは確認できました。

URLのパラメータを取得し、条件判定して状況に応じて該当のメニューにクラスを付与してオープン状態にしておく為のコードを教えていただけますでしょうか。

**※試しにパラメータを取得し、値が1の場合にクラスを付与してみましたが、リンク先でカテゴリー1のメニューは閉じたままでした。
**

返信遅くなり大変申し訳ございませんでした。

(例)
<ul> 
<li> 
<div class="category">category1</div> 
<ul class="fxmn"> 
<li><a href="http://www.com/11?menu=1">menu 1-1</a></li> 
<li><a href="http://www.com/12?menu=1">menu 1-2</a></li> 
<li><a href="http://www.com/13?menu=1">menu 1-3</a></li> 
</ul> 
</li> 
<li> 
<div class="category">category2</div> 
<ul class="fxmn"> 
<li><a href="http://www.com/21?menu=2">menu 2-1</a></li> 
<li><a href="http://www.com/22?menu=2">menu 2-2</a></li> 
<li><a href="http://www.com/23?menu=2">menu 2-3</a></li> 
</ul> 
</li> 
<li> 
<div class="category">category3</div> 
<ul class="fxmn"> 
<li><a href="http://www.com/31?menu=3">menu 3-1</a></li> 
<li><a href="http://www.com/32?menu=3">menu 3-2</a></li> 
<li><a href="http://www.com/33?menu=3">menu 3-3</a></li> 
</ul> 
</li> 
</ul> 
$(function(){ 
    $("ul.fxmn").hide(); 
    $("div.category").click(function(){ 
      $("ul.fxmn").slideUp(); 
      if($("+ul",this).css("display")=="none"){ 
        $("+ul",this).slideDown(); 
      } 
    }); 
  });
var param = getParam('menu'); //
if (param == 1) {
  menu.classList.add('is-menuOpen');
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/10/19 11:03

    ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

    キャンセル

  • Lhankor_Mhy

    2018/10/19 11:20

    リンク先がそれぞれ別ドメインになっているようですが、それらのサイト群は質問者が管理しているものですか?

    キャンセル

  • Lhankor_Mhy

    2018/10/24 17:18

    変数 menu には何が入っていますか? また、getParam関数が定義されている部分のコードをご提示ください。

    キャンセル

回答 1

+4

やるべき事は

  1. URLの取得
  2. parameterの分析
  3. 分析したパラメータをメニューから探す
  4. メニューを動かす

ですかね

理解したかちょっと自信ないですが、だいたいこういう感じではないでしょうか

<ul> 
    <li> 
        <div class="category">category1</div> 
        <ul class="fxmn"> 
            <li><a href="http://www.11?menu=1">menu 1-1</a></li> 
            <li><a href="http://www.12?menu=1">menu 1-2</a></li> 
            <li><a href="http://www.13?menu=1">menu 1-3</a></li> 
        </ul> 
    </li> 
    <li> 
        <div class="category">category2</div> 
        <ul class="fxmn"> 
            <li><a href="http://www.21?menu=2">menu 2-1</a></li> 
            <li><a href="http://www.22?menu=2">menu 2-2</a></li> 
            <li><a href="http://www.23?menu=2">menu 2-3</a></li> 
        </ul> 
    </li> 
    <li> 
        <div class="category">category3</div> 
        <ul class="fxmn"> 
            <li><a href="http://www.31?menu=3">menu 3-1</a></li> 
            <li><a href="http://www.32?menu=3">menu 3-2</a></li> 
            <li><a href="http://www.33?menu=3">menu 3-3</a></li> 
        </ul> 
    </li> 
</ul> 

<button onclick="javascript:doIt('http://www.11?menu=1')" >example URL : http://www.11?menu=1</button> <br>
<button onclick="javascript:doIt('http://www.12?menu=1')" >example URL : http://www.12?menu=1</button><br>
<button onclick="javascript:doIt('http://www.13?menu=1')" >example URL : http://www.13?menu=1</button><br>
<button onclick="javascript:doIt('http://www.21?menu=2')" >example URL : http://www.21?menu=2</button><br>
<button onclick="javascript:doIt('http://www.22?menu=2')" >example URL : http://www.22?menu=2</button><br>
<button onclick="javascript:doIt('http://www.23?menu=2')" >example URL : http://www.23?menu=2</button><br>
<button onclick="javascript:doIt('http://www.31?menu=3')" >example URL : http://www.31?menu=3</button><br>
<button onclick="javascript:doIt('http://www.32?menu=3')" >example URL : http://www.32?menu=3</button><br>
<button onclick="javascript:doIt('http://www.33?menu=3')" >example URL : http://www.33?menu=3</button>

<script>
$(function(){ 
    $("ul.fxmn").hide(); 
    $("div.category").click(function(){ 
      $("ul.fxmn").slideUp(); 
      if($("+ul",this).css("display")=="none"){ 
        $("+ul",this).slideDown(); 
      } 
    }); 
  });

// URLからパラメータを取得する
function doIt(testurl) { 
    // 参考:https://stackoverflow.com/questions/1314383/how-to-check-if-a-querystring-value-is-present-via-javascript
    var queryString = window.location.href; // URL
    queryString = testurl // my test 

    var paramName = "menu"; // 区別用のパラメータ名
    var parameterValue = getParameterFromUrl(paramName, queryString)

    // a hrefの配列取得。 *sideEffectがあるかもしれないので、そこは補修しましょう
       var els = document.querySelectorAll("a[href^='http://']");

       // menuのリンクを探りながらパラメータが一致するのを検索
    for (var i = 0, l = els.length; i < l; i++) {
         var el = els[i];
         // hrefのURLから比較用のパラメータを取得
         var hrefParamValue = getParameterFromUrl(paramName, el.href)
          if(parameterValue === hrefParamValue) {
              $(el).closest('ul').slideDown()
          } else {
            $(el).closest('ul').slideUp()
          }
    }
}

// 入力したURLからパラメータを取得
function getParameterFromUrl(paramName, urlString) {
    var params = urlString.substring(urlString.indexOf("?")+1).split('&'); // URLからパラメータ配列分析
    var parameterValue = "";
    for(var i=0; i<params.length; i++){
        var pair=params[i].split('=');
        if(pair[0] === paramName && pair[1]) {
            parameterValue = pair[1]; // 狙ってたパラメータの取得
        }
    }
    return parameterValue;
}
</script>

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる