在按钮单击和下一个/上一个按钮上交换内容答案

【问题标题】：Swap content on buttons click and Next / Prev buttons在按钮单击和下一个/上一个按钮上交换内容
【发布时间】：2021-05-11 07:22:01
【问题描述】：

我需要在按钮/数字点击时交换内容。
如果您可以在 sn-p 上看到，您可以使用按钮“1、2、3、4”或使用 Next 和 Prev 按钮访问文章。两者都可以访问同一篇文章。我的代码已经可以使用，但如果您想使用 Next/Prev 或数字按钮，您需要先刷新它。

$(document).ready(function() {
  $(".btn-hover div").each(function(e) {
    if (e != 0)
      $(this).hide();
  });
  

  $("#next").click(function() {
    if ($(".content5 div:visible,.content6 div:visible").next().length != 0)
      $(".content5 div:visible,.content6 div:visible").next().show().prev().hide();
    else {
      $(".content5 div:visible,.content6 div:visible").hide();
      $(".content5 div:first,.content6 div:first").show();
    }
    return false;
  });

  $("#previous").click(function() {
    if ($(".content5 div:visible,.content6 div:visible").prev().length != 0)
      $(".content5 div:visible,.content6 div:visible").prev().show().next().hide();
    else {
      $(".content5 div:visible,.content6 div:visible").hide();
      $(".content5 div:last,.content6 div:last").show();
    }
    return false;
  });


$('.btn-hover').first().addClass('btn-active');
$('.btn-hover').click(function(){
  var $this = $(this);
  $siblings = $this.parent().children(),
  position = $siblings.index($this);
  console.log (position);
  
  $('.content5 div').removeClass('btn-active').eq(position).addClass('btn-active');
  $('.content6 div').removeClass('btn-active').eq(position).addClass('btn-active');
  $siblings.removeClass('btn-active');
  $this.addClass('btn-active');
});
});

<!doctype html>
<html lang="en">

<head>
</head>

<body>
  <!--Navbar-->
  <div id="section1-the-timeline" class="scrollNav">
    <div class="container-fluid section section_bg_grey">
      <div class="col">
        <div Class="button-wrap timeline  px-5">
          <a href="#section2-the-timeline" class="btn-hover">1</a>
          <a href="#section2-the-timeline" class="btn-hover">2</a>
          <a href="#section2-the-timeline" class="btn-hover">3</a>
        </div>
      </div>
    </div>
  </div>

  <div id="section2-the-timeline" class="section section_secondary_bg">
    <div class="container-fluid">
      <div class="row d-flex align-items-center">
        <div class="col-md-7">
          <div class="text-center section_content">
            <div id="content5" class="content5 pb-4">
              <div class="btn-content-1 btn-active">
                <p>1</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p>
              </div>
              <div class="btn-content-2">
                <p>2</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci ullam reiciendis beatae perspiciatis impedit quam nemo asperiores, deserunt, distinctio</p>
              </div>
              <div class="btn-content-3">
                <p>3</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-5 img_wrapper">
          <div id="content6" class="content6">
            <div class="btn-content-1 btn-active"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
            <div class="btn-content-2"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
            <div class="btn-content-3"><img src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div>
           
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="chevron">
    <div class="d-flex justify-content-center middle-chevron">
      <button id="previous" class="btn btn-chevron"><i class="fas fa-chevron-left"></i></button>
      <button id="next" class="btn btn-chevron"><i class="fas fa-chevron-right"></i></button>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script src="js/animation.js"></script>
</body>

</html>

【问题讨论】：

编程不是将像.content6 这样的选择器编号硬编码到您的逻辑中。删除或添加一项并查看您的代码失败。相反 - 使用 .length 获取元素长度/计数。同样，只要您在文档中插入另一个 class="foo bar content5" - 您的脚本也会失败 - 因为定位错误的元素 - 但它仅限于具有特定 ID-s 的按钮，这也会挖掘您的代码可重用性。
.content6 只是一个例子。对不起。
是的，我已经尝试过使用两个不同的类，您是否建议我需要使用 ID 而不是类？
最简单的方法是将所有元素包装在父元素中（导航、幻灯片、上一个/下一个按钮），然后将元素搜索为该父元素的后代。这样一来，您就可以在单个页面中拥有无数类似的模块，而不受限制。否则，您需要使用 data-* 属性（给您的按钮）分配以引用它们控制的目标元素。 - 此外，您可以动态创建导航按钮，并且在编写 HTML 时只关注内容循环。
你能帮我修复我的代码吗？请

标签： javascript html jquery css button

【解决方案1】：

为您的页面添加一个具有特定 ID 的元素
将带有数据选项卡的 DIV-分页放在您想要的任何位置
将带有数据选项卡的 DIV-导航放在任何你想要的地方

<div data-tabs-pagination="#someElement"><!-- POPULATED BY JS --></div>

<div id="someElement" class="css-pages">
    <div>Page 1 Lorem</div>
    <div>Page 2 Ipsum</div>
    <div>Page 3 Dolor</div>
</div>

<div data-tabs-navigation="#someElement"><!-- POPULATED BY JS --></div>

注意data-tabs-* 属性如何匹配您要控制的目标元素 ID 选择器。

带有一些带有自定义选项的可选对象的 JavaScript instance 可能如下所示：

// Use like:
const myTabs = new Tabs("#someElement", {
  page: 1, // Start from second page (Page index 1),
  btnPrev: {innerHTML: "&larr;", className: "btn"},
  btnNext: {innerHTML: "&rarr;", className: "btn"},
  onChange() {
    console.log(this);
  }
});

// What you can also do:
myTabs.show(0);           // Show page at index (First page = 0)
myTabs.next();            // Go to next page
myTabs.prev(2);           // Go back two pages
myTabs.next().next();     // Go forward two pages (thanks to chaining methods)
console.log(myTabs.page); // Get current page index

这样做，您可以在使用完全相同的脚本的单个文档中拥有尽可能多的选项卡/页面，甚至幻灯片或画廊：

class Tabs {
  constructor(selector, options = {}) {
    Object.assign(
      this, {
        EL: document.querySelector(selector),
        page: 0,
        selector,
        btnTabs: {}, // Custom attributes for tabs (navigation) buttons
        btnPrev: {}, // Custom attributes for PREV button
        btnNext: {}, // Custom attributes for NEXT button
        classActive: "is-active",
        onChange: () => {},
      },
      options
    );
    this.EL_pages = this.EL.children;
    this.EL_pagination = document.querySelectorAll(`[data-tabs-pagination="${this.selector}"]`);
    this.EL_navigation = document.querySelectorAll(`[data-tabs-navigation="${this.selector}"]`);
    this.total = this.EL_pages.length;
    this.EL_prev = this._ELNew("button", {
      type: "button",
      textContent: "Prev",
      onclick: () => this.prev(),
      ...this.btnPrev,
    });
    this.EL_next = this._ELNew("button", {
      type: "button",
      textContent: "Next",
      onclick: () => this.next(),
      ...this.btnNext,
    });
    this.EL_buttons = Array.from(Array(this.total)).reduce((arr, _, i) => {
      const EL_btn = this._ELNew("button", {
        type: "button",
        textContent: i + 1,
        onclick: () => (this._page = i),
        ...this.btnPagination,
      });
      arr.push(EL_btn);
      return arr;
    }, []);
    this._init();
  }

  // Utility function - New element
  _ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});

  // Fix negative modulo index 
  _mod = (n) => ((n % this.total) + this.total) % this.total;

  // Initialize
  _init() {
    // Append nav buttons to DOM
    this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons));
    this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next));

    // Set current page
    this._page = this.page;
  }

  prev(n = 1) {
    this._page -= n;
    return this;
  }

  next(n = 1) {
    this._page += n;
    return this;
  }

  show(idx) {
    this._page = idx;
    return this;
  }

  set _page(n) {
    this.page = this._mod(n);
    [...this.EL_pages, ...this.EL_buttons].forEach((EL) => EL.classList.remove(this.classActive));
    [this.EL_pages[this.page], this.EL_buttons[this.page]].forEach((EL) => EL.classList.add(this.classActive));
    // Provide a callback
    this.onChange.call(this);
  }

  get _page() {
    return this.page;
  }
}


// Use like:
const mySectionTabs = new Tabs("#section-a", {
  onChange() {
    console.clear();
    console.log(`Current page index: ${this.page}`);
  }
});

/*
  The CSS is entirely up to you,
  the only thing you need to know is that JS adds ".is-active" to both
  - the current page / slide
  - the current pagination button
*/

.css-pages > div {
  display: none;
}

.css-pages > div.is-active {
  display: block;
}

[data-tabs-pagination] > button.is-active {
  color: #0bf;
}

<div data-tabs-pagination="#section-a"></div>
<div id="section-a" class="css-pages">
  <div>Page 1 Lorem</div>
  <div>Page 2 Ipsum</div>
  <div>Page 3 Dolor</div>
</div>
<div data-tabs-navigation="#section-a"></div>

【讨论】：