Question

这是我在这里提出的第一个问题，所以任何提出更好问题的方向都会受到赞赏，当然还有任何帮助。： - ）

我正在使用Drupal行为和jquery来设置长形式的导航。（表单使用entityform创建）

我有三个下拉菜单（一个位于顶部，一个位于侧栏，一个位于表单下方），用户可以使用它从一个“页面”导航到另一个“页面”。底部的下拉菜单还包括prev和next按钮。

我的问题是所有底部下拉菜单和上一个和下一个按钮都无法正常工作。问题如下：

从底部下拉列表中选择元素时，它不会更改内容（添加和删除类hidden）。顶部和侧面 dropbar works
点击下一步时，我将转到下一页。但是，当我点击上一步时，我将被带到第一页，下一个按钮也不再有效。

我试图创建一个JSfiddle它有正确的HTML标记，但我无法让JS工作，可能是因为它是为drupal行为而制作的。可以找到实时版本here。我已经尝试了prevAll（）和nextAll（），而不是prev（）和next（），但没有得到任何改进。而且我很遗憾为什么在其他人的时候底部下拉列表不起作用。

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");
  });

提前感谢您的帮助！

使用下拉列表时jquery prev问题

0 个答案: