Question

我有许多内容不同的部分，以及指向下一部分的链接（上一个和下一个）。

这很好，但是当我在中间添加新部分时，我必须更改所有ID，以便next和prev按钮仍然可以正常工作。

让我们看看这个例子：

<section id="uno" class="portfolio-item">
<div>my content</div>
<a class="next" href="#dos">Next</a>
</section>

<section id="dos" class="portfolio-item">
<div>my content</div>
<a class="back" href="#uno">Back</a>
<a class="next" href="#tres">Next</a>
</section>

<section id="tres" class="portfolio-item">
<div>my content</div>
<a class="back" href="#dos">Back</a>
<a class="next" href="#cuatro">Next</a>
</section>

考虑到我不想手动执行此操作，因为我通常会添加内容，而且并不总是在结尾处添加内容，因此我需要知道如何使用jQuery自动执行此操作。

因此，我不想将id添加到每个部分，而将#link手动添加到next / prev部分。

如何自动执行此操作？检测下一个部分，只需单击下一个按钮，而无需添加每个部分的名称（在链接和该部分中）。

使用解决方案进行编辑：

$(document).ready(function() {
 $(".next-new").attr("href", function(){
  return "#"+$(this).parents("section").next("section").attr("id");
 });
});

Answer 1

这可能有助于滚动下一个和上一个动态创建的部分

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".next").click(function(){
            $('html, body').animate({
                scrollTop: $(this).parent().next().offset().top
            }, 2000);
    });

     $(".back").click(function(){
            $('html, body').animate({
                scrollTop: $(this).parent().prev().offset().top
            }, 2000);
    });

});
</script>
</head>
<body>
<section id="uno" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="next">Next</a>
</section>

<section id="dos" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>

<section id="tres" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>

<section id="tres" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>

<section id="tres" class="portfolio-item" style="height:300px">
<div>my content</div>
<a class="back">Back</a>
<a class="next">Next</a>
</section>
</body>
</html>

Answer 2

您可以尝试删除硬编码的部分ID，并动态添加它，并与每个部分的后退和下一个按钮href相同：

$("section").each(function(i) {
  $(this).attr("id", i)

  //Back button
  var backButton = $(this).children().get(1);
  if (backButton.innerHTML == "Next") {
    $(backButton).attr("href", "#" + (i + 1))
    console.log(`Section id ${i} next element is ${(i + 1)} =>`, $(this).children().get(1))
  } else {
    $(backButton).attr("href", "#" + (i - 1))
    console.log(`Section id ${i} back element is ${(i - 1)} =>`, $(this).children().get(1))
  }

  var nextButton = $(this).children().get(2);
  if (nextButton) {
    $(nextButton).attr("href", "#" + (i + 1))
    console.log(`Section id ${i} next element is ${(i + 1)} =>`, $(this).children().get(2))
  }


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="portfolio-item">
  <div>my content 1 </div>
  <a class="next" href="#dos">Next</a>
</section>

<section class="portfolio-item">
  <div>my content 2</div>
  <a class="back" href="#uno">Back</a>
  <a class="next" href="#tres">Next</a>
</section>

<section class="portfolio-item">
  <div>my content 3</div>
  <a class="back" href="#dos">Back</a>
  <a class="next" href="#cuatro">Next</a>
</section>

滚动到下一个和上一个ID

2 个答案: