1

这是我在这里的第一个问题，因此任何提出更好问题的方向都值得赞赏，当然任何帮助更是如此。:-)

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

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

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

  • 从底部下拉列表中选择元素时，它不会更改内容（添加和删除类hidden）。顶部和侧面下拉栏有效
  • 单击下一步时，我将进入下一页。但是，当我单击 prev 时，我被带到了第一页，并且 next 按钮也不再起作用。

我试图创建一个JSfiddle它具有正确的 HTML 标记，但我无法让 JS 工作，可能是因为它是为 drupal 行为而制作的。现场版本可以在这里找到。我已经尝试使用 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");
  });

提前谢谢你的帮助！

4

0 回答 0