如何添加 "Go Back" 切换

Question

我有一个代码，如果我按 "next"，它允许我转到新文本，但我还想创建另一个按钮，它允许我返回到我正在阅读的上一个文本。

我知道我只写了 Previous 但我不知道 javascript 返回。

$(function() {

    $('.js-button').click(function() {
      if ($('div.active').next().hasClass('hidemsg')) {
        $('div.active').next('div').addClass('active').end().removeClass('active');
      }else{
        alert('Sorry, there is no next entry');
      }
    });
});

.hidemsg {
 display: none;
  }
  
  .hidemsg.active {
 display: block;
  }

<!DOCTYPE html>
<html lang="en" class="no-js.june">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
<div id="msg1" class="hidemsg active">
   <p class="content__item-copy-text">
      1) Info here
      </p>
</div>
    
<div id="msg2" class="hidemsg"> 
      <p class="content__item-copy-text">
       2) Info Here </p>
</div>
    
   
<div id="msg3" class="hidemsg">
  <p class="content__item-copy-text">
       3) Info Here </p>
</div>
    
    
<div id="msg4" class="hidemsg"> 
  <p class="content__item-copy-text">
       4) Info Here </p>
</div>

    <div id="msg5" class="hidemsg">
   <p class="content__item-copy-text">
       5) Info Here </p>
</div>
<a href="#" type="button" class="btn btn-default js-button">Next</a>

Answer 1

将您的 javascript 替换为以下几行

$(function() {
    $('#next').click(function() {
        $('.hide-default').show();
        if ($('div.active').next().hasClass('hidemsg')) {
            $('div.active').next('div').addClass('active').end().removeClass('active');
        } else{
            alert('Sorry, there is no next entry');
        }
    });
    $('#prev').click(function() {
        //$('.hide-default').show();
        if ($('div.active').prev().hasClass('hidemsg')) {
            $('div.active').prev('div').addClass('active').end().removeClass('active');
        } else{
            alert('Sorry, there is no previous entry');
        }
    });
});

在 css

末尾添加 css 的下一行

.hide-default{
    display: none;
}

从您的 html

中删除以下行

<a href="#" type="button" class="btn btn-default js-button">Next</a>

并将这些行添加到您的 html

<a id="prev" href="#" type="button" class="btn btn-default hide-default js-button">Previous</a>
<a id="next" href="#" type="button" class="btn btn-default js-button">Next</a>

Answer 2

使用它，效果非常好。

// Next
    
    $('.js-button').click(function() {
      if ($('div.active').next().hasClass('hidemsg')) {
        $('div.active').next('div').addClass('active').end().removeClass('active');
      }else{
        alert('Sorry, there is no next entry');
      }
    });   

// Previous

$('#previous_button').click(function()  {

  if ($('.active').prev().hasClass('hidemsg')) {


     $('.active').prev('div').addClass('active').end().removeClass('active');

  } else {

    alert('Sorry, there is no previous entry');

  }

});

.hidemsg {
 display: none;
  }
  
  .hidemsg.active {
 display: block;
  }

<!DOCTYPE html>
<html lang="en" class="no-js.june">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
<div id="msg1" class="hidemsg active">
   <p class="content__item-copy-text">
      1) Info here
      </p>
</div>
    
<div id="msg2" class="hidemsg"> 
      <p class="content__item-copy-text">
       2) Info Here </p>
</div>
    
   
<div id="msg3" class="hidemsg">
  <p class="content__item-copy-text">
       3) Info Here </p>
</div>
    
    
<div id="msg4" class="hidemsg"> 
  <p class="content__item-copy-text">
       4) Info Here </p>
</div>

    <div id="msg5" class="hidemsg">
   <p class="content__item-copy-text">
       5) Info Here </p>
</div>
<a href="#" type="button" class="btn btn-default js-button">Next</a>
<a href="#" type="button" class="btn btn-default" id="previous_button">Previous</a>

Answer 3

您可以使用数据属性添加索引，然后检查其值以使用 jquery 中的 next/previous 方法设置显示隐藏...

我为数据设置了一个变量，然后根据单击下一个或上一个按钮的位置使用 next() 或 prev() 递增它。如果信息 = 1 则隐藏上一个按钮并显示下一个按钮，如果数据 = 元素长度则隐藏下一个并显示上一个...

$(function() {
  let data;
  let len = $('.msg').length;
  $('.js-button').click(function() {

    

    if ($(this).hasClass('next')) {
      data = $('div.active').next().data('info');
      if ($('div.active').next().hasClass('hidemsg')) {
        $('div.active').next('div').addClass('active').end().removeClass('active');
      }
    } else if ($(this).hasClass('previous')) {
      data = $('div.active').prev().data('info');
      if ($('div.active').prev().hasClass('hidemsg')) {
        $('div.active').prev('div').addClass('active').end().removeClass('active');
      }
    }
    
    if (data === 1) {
      $('.previous').hide();
      $('.next').show();
    }
    if (data > 1) {
      $('.previous').show();
    }
    if (data > 4) {
      $('.next').hide();
    }
    
    console.log(len, data)

  });
});

.hidemsg {
  display: none;
}

.hidemsg.active {
  display: block;
}

.previous {
  display: none;
}

<!DOCTYPE html>
<html lang="en" class="no-js.june">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div data-info="1" id="msg1" class="msg hidemsg active first">
  <p class="content__item-copy-text">
    1) Info here
  </p>
</div>

<div data-info="2" id="msg2" class="msg hidemsg">
  <p class="content__item-copy-text">
    2) Info Here </p>
</div>


<div data-info="3" id="msg3" class="msg hidemsg">
  <p class="content__item-copy-text">
    3) Info Here </p>
</div>


<div data-info="4" id="msg4" class="msg hidemsg">
  <p class="content__item-copy-text">
    4) Info Here </p>
</div>

<div data-info="5" id="msg5" class="msg hidemsg last">
  <p class="content__item-copy-text">
    5) Info Here </p>
</div>
<a href="#" type="button" class="btn btn-default js-button next">Next</a>
<a href="#" type="button" class="btn btn-default js-button previous">Previous</a>

Answer 4

您可以使用数据属性添加索引，然后检查其值以使用 jquery 中的 next/previous 方法设置显示隐藏...

我为数据设置了一个变量，然后根据单击下一个或上一个按钮的位置使用 next() 或 prev() 递增它。如果信息 = 1 则隐藏上一个按钮并显示下一个按钮，如果数据 = 元素长度则隐藏下一个并显示上一个...

$(function() {
  let data;
  let len = $('.msg').length;
  $('.js-button').click(function() {

    

    if ($(this).hasClass('next')) {
      data = $('div.active').next().data('info');
      if ($('div.active').next().hasClass('hidemsg')) {
        $('div.active').next('div').addClass('active').end().removeClass('active');
      }
    } else if ($(this).hasClass('previous')) {
      data = $('div.active').prev().data('info');
      if ($('div.active').prev().hasClass('hidemsg')) {
        $('div.active').prev('div').addClass('active').end().removeClass('active');
      }
    }
    
    if (data === 1) {
      $('.previous').hide();      
    }
    if(data < len){
    $('.next').show();
    }
    if (data > 1) {
      $('.previous').show();
    }
    if (data === len) {
      $('.next').hide();
    }
    
    console.log(len, data)

  });
});

.hidemsg {
  display: none;
}

.hidemsg.active {
  display: block;
}

.previous {
  display: none;
}

<!DOCTYPE html>
<html lang="en" class="no-js.june">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div data-info="1" id="msg1" class="msg hidemsg active first">
  <p class="content__item-copy-text">
    1) Info here
  </p>
</div>

<div data-info="2" id="msg2" class="msg hidemsg">
  <p class="content__item-copy-text">
    2) Info Here </p>
</div>


<div data-info="3" id="msg3" class="msg hidemsg">
  <p class="content__item-copy-text">
    3) Info Here </p>
</div>


<div data-info="4" id="msg4" class="msg hidemsg">
  <p class="content__item-copy-text">
    4) Info Here </p>
</div>

<div data-info="5" id="msg5" class="msg hidemsg last">
  <p class="content__item-copy-text">
    5) Info Here </p>
</div>
<a href="#" type="button" class="btn btn-default js-button next">Next</a>
<a href="#" type="button" class="btn btn-default js-button previous">Previous</a>

如何添加 "Go Back" 切换

How to Add a "Go Back" Toggle

html

javascript

css

jquery

toggle