Question

我在这里要做的是获取当前可见字段的下一个字段集的id，这样当我按下它时，它会加载下一个字段集的id。

它似乎取得的最好成绩是获得下一个id但停止。

$(".next").on("click", function() {

  $('this').attr("href", function() {
    return "#" + $('fieldset:visible"').next("fieldset").attr("id");
  });
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;}
html,body,fieldset{width:100%;height:100%;}
fieldset{position:relative;}
#one{background-color:red}
#two{background-color:green}
#three{background-color:blue}
#four{background-color:red}
#five{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="next" href="#two">NEXT</a>
  <fieldset id="one"></fieldset>
  <fieldset id="two"></fieldset>
  <fieldset id="three"></fieldset>
  <fieldset id="four"></fieldset>
  <fieldset id="five"></fieldset>

Answer 1

您可以将location.hash与帮助程序类active一起使用，如下面的代码段所示。

希望这有帮助。

＆＃13;

$(".next").on("click", function(e) {
  e.preventDefault();

  $('fieldset.active').removeClass('active').next("fieldset").addClass("active");

  location.hash = "#" + $('fieldset.active').attr('id');
});

＆＃13;

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;}
html,body,fieldset{width:100%;height:100%;}
fieldset{position:relative;}
#one{background-color:red}
#two{background-color:green}
#three{background-color:blue}
#four{background-color:red}
#five{background-color:green}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class="next" href="#">NEXT</a>
<fieldset id="one" class='active'></fieldset>
<fieldset id="two"></fieldset>
<fieldset id="three"></fieldset>
<fieldset id="four"></fieldset>
<fieldset id="five"></fieldset>

＆＃13;

Answer 2

您可以先隐藏点击后的那个，然后继续使用可见的

function changeText(text) {
  return (text.indexOf('+') >= 0) ? 'Click Me -' : 'Click Me +';
}

$(".dropbtn").click(function() {

  var $this = $(this),
    $dropdownActive = $('.dropdown-active');

  /* changing the text of the active button (if any) */
  $dropdownActive.text(changeText($dropdownActive.text()));

  /* hiding the content under the active button (if any) */
  $('.dropdown-content', $dropdownActive.parent()).toggle('show');

  if (!$this.hasClass('dropdown-active')) {

    /* changing the text of the clicked button */
    $this.text(changeText($this.text()));

    /* showing the content under the clicked button */
    $('.dropdown-content', $this.parent()).toggle('show');

    /* adding this class to the clicked button */
    $this.addClass('dropdown-active');
  }

  /* removing this class from the active button */
  $dropdownActive.removeClass('dropdown-active');
});

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var $dropdownActive = $('.dropdown-active');

    /* changing the text of the active button (if any) */
    $dropdownActive.text(changeText($dropdownActive.text()));

    /* hiding the content under the active button (if any) */
    $('.dropdown-content', $dropdownActive.parent()).toggle('show');

    /* removing this class from the active button */
    $dropdownActive.removeClass('dropdown-active');
  }
}

$(".next").on("click", function() {

  $(this).attr("href", function() {
    var f= $('fieldset:visible:first');
    f.hide();
    return "#" + f.next("fieldset").attr("id");
  });
});

a{position:fixed;left:0;bottom:0;z-index:999;background:black;color:#fff;padding:50px;}
html,body,fieldset{width:100%;height:100%;}
fieldset{position:relative;}
#one{background-color:red}
#two{background-color:green}
#three{background-color:blue}
#four{background-color:red}
#five{background-color:green}

Answer 3

$(this)...

您不需要引号。

添加下一个可见对象的id以进行链接

3 个答案: