1

これはここでの私の最初の質問なので、より良い質問をするための方向性は高く評価されています。:-)

Drupal の動作と jquery を使用して、長い形式のナビゲーションをセットアップしています。(フォームはエンティティフォームを使用して作成されます)

ユーザーが 1 つの「ページ」から別のページに移動するために使用できる 3 つのドロップダウン (上部に 1 つ、サイド バーに 1 つ、フォームの下に 1 つ) があります。下部のドロップダウンには、前へと次へのボタンも含まれています。

私の問題は、すべての一番下のドロップダウンと前と次のボタンが正しく機能していないことです。問題は次のとおりです。

  • 下部のドロップダウン リストから要素を選択しても、コンテンツは変更されません (クラスの追加と削除hidden)。トップとサイドのドロップバーが機能します
  • [次へ] をクリックすると、次のページに移動します。ただし、[前へ] をクリックすると最初のページに移動し、[次へ] ボタンも機能しなくなります。

JSfiddleを作成しようとしました。正しい HTML マークアップが含まれていますが、JS を機能させることができません。おそらく、drupal の動作用に作成されたためです。ライブバージョンはここにあります。prev() と next() の代わりに、prevAll() と nextAll() を試してみましたが、改善されませんでした。そして、他のドロップダウンが機能しているときに下部のドロップダウンが機能しない理由について、私はかなり迷っています。

HTML マークアップ

<div class="preform">
  <select id="topnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
</div>
<div id="form">
  <div class="row">
    <div class="col1">
      <div class="page">
        <h3>title1</h3>
        [some content]  
      </div>
      <div class="page">
        <h3>title2</h3>
        [some content]
      </div>
      <div class="page">
        <h3>title3</h3>
        [some content]
      </div>
    </div>
    <div class="col2">
      <div class="static">
        <select id="bottomnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
      </div>
    </div>
  </div>
</div>
<div id="form-nav">
  <input value="Previous" type="button" class="btn btn-default" id="buttonPrev">
  <select id="bottomnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
  <input value="Next" type="button" class="btn btn-default" id="buttonNext">
</div>

ページの読み込み時に一度実行して開始条件を設定するjquery

 $('#edit-actions',context).once('gotButtons', function() {

    /* hides pages and shows welcome page on first load */
    $(".page").addClass("hidden");
    $("h3:contains('title1')").parent().removeClass("hidden");
    $("#buttonPrev",context).prop('disabled', true);
    $(".nav-drop > option:selected").attr("selected","selected");

  });

ドロップダウンイベントの変更に関するjquery

$(".nav-drop",context).change(function() {
    /* hides everything */
    $(".page").addClass("hidden");

    /* unhides the selected item */
    var item = this.value;
    $('.page h3').filter(function(){ 
      return($(this).text() == item);
    }).parent().removeClass("hidden");

    /* update all dropdowns to the chosen value */
    $(".nav-drop",context).val(item);

    /* Disable first and last button */
    var isFirstElementSelected = $('#topnav > option:selected').index() === 0;
    var isLastElementSelected = $('#topnav > option:selected').index() == $('#topnav > option').length -1;

    if (isFirstElementSelected) {
      $("#buttonPrev",context).prop('disabled', true);
      $("#buttonNext",context).prop('disabled', false);
    } else if (isLastElementSelected) {     
      $("#buttonPrev",context).prop('disabled', false);
      $("#buttonNext",context).prop('disabled', true);
    } else {
      $("#buttonPrev",context).prop('disabled', false);
      $("#buttonNext",context).prop('disabled', false);
    }
  });

クリックされたボタンのjquery

/* Adds next/prev functionality */
  $("#buttonNext").click(function() {
    $('.nav-drop > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');  

    $(".nav-drop",context).trigger("change");
  });

  $("#buttonPrev").click(function() {
    $('.nav-drop > option:selected').removeAttr('selected').prevAll('option').attr('selected', 'selected');

    $(".nav-drop",context).trigger("change");
  });

事前に助けてくれてありがとう!

4

0 に答える 0