Question

我有一个代码，如果按“下一个”，则可以转到新文本，但是我还想创建另一个按钮，它可以使我返回到正在阅读的上一个文本。

我知道我只写了Previous，但是我不知道要返回的JavaScript。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question m-2">
    <div class="question-title">Question 1</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-1">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-1">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-1">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-1">Option d
        </label>
    </div>
</div>
<div class="question m-2">
    <div class="question-title">Question 2</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-2">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-2">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-2">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-2">Option d
        </label>
    </div>
</div>
<div class="question m-2">
    <div class="question-title">Question 3</div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="a" name="q-3">Option a
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="b" name="q-3">Option b
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="c" name="q-3">Option c
        </label>
    </div>
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" class="form-check-input" value="d" name="q-3">Option d
        </label>
    </div>
</div>
<button id="submit">
Submit
</button>

$(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;
  }

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

您可以使用data属性添加索引，然后使用jquery中的next / previous方法检查其值以设置show hide ...

我为数据设置了一个变量，然后tehn使用next（）或prev（）将其递增，具体取决于单击了下一个或上一个按钮的位置。如果info = 1，则隐藏上一个按钮，然后显示下一个按钮；如果data =元素的长度，则隐藏下一个按钮，并显示上一个...

$(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

您可以使用data属性添加索引，然后使用jquery中的next / previous方法检查其值以设置show hide ...

我为数据设置了一个变量，然后tehn使用next（）或prev（）将其递增，具体取决于单击了下一个或上一个按钮的位置。如果info = 1，则隐藏上一个按钮，然后显示下一个按钮；如果data =元素的长度，则隐藏下一个按钮，并显示上一个...

array([[ 1],
       [ 2],
       [ 3],
       [ 4],
       [ 5],
       [ 6],
       [ 7],
       [ 8],
       [ 9],
       [10]])

$(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;
}

如何添加“返回”切换

4 个答案: