Question

我在gh-pages中有四个段落，并且第一个孩子（或者更确切地说是第一段）可见。此外，我有两个按钮（“下一个”和“上一个”），单击该按钮时，我必须隐藏当前段落并显示下一个/上一个段落。

我试图编写一个可以实现此目标的函数，但是似乎没有用。它不会隐藏当前段落，也不会显示下一个/上一个同级。

这里是一个例子：

div

var show = function(elem) {
  elem.style.display = 'block';
};

var hide = function(elem) {
  elem.style.display = 'none';
}

var toggle = function(elem, next) {
  if (window.getComputedStyle(elem).display === 'block') {
    hide(elem);
    show(next);
    return;
  }
};

var count = 0;

document.addEventListener('click', function(event) {
  if (!event.target.classList.contains('toggle')) return;

  event.preventDefault();
  var e = document.getElementById("bal");
  var content = e.childNodes[count];
  count++;
  var next = content.nextSibling;
  if (!content) return;

  toggle(content, next);
}, false);

#bal {
  width: 48%;
  border: 1px solid red;
  padding: 1em;
}

#bal p {
  display: none;
}

#bal p:nth-child(1) {
  display: block;
}

#jobb {
  width: 48%;
  float: right;
}

此功能无法识别当前段落，如果我在“下一个”按钮上单击两次，它将删除第一段的文本。

Answer 1

@dbramwell有一个有价值的解释，为什么您的代码无法正常工作：

使用childNodes而不是子节点。尝试在其上设置样式时，需要使用子级来获取元素，而不是节点。参见here。

if(!content) return;，您需要检查是否存在“下一个”而不是内容，因为在上一段中，当下一个不存在时，内容将存在

并更正了您的功能：

var show = function (elem){
    elem.style.display = 'block';
};

var hide = function (elem){
    elem.style.display = 'none';
}

var toggle = function(elem, next){
    if (window.getComputedStyle(elem).display === 'block'){
        hide(elem);
        show(next);
        return;
    }
};

var count = 0;

document.addEventListener('click', function(event){
    if (!event.target.classList.contains('toggle')) return;
    event.preventDefault();
    var e = document.getElementById("bal");
    var content = e.children[count];
    count++;
    var next = e.children[count];
    if(!next) return;

    toggle(content, next);
}, false);

<!DOCTYPE html>
<html lang="hu">

<head>
    <title>JS példák</title>
    <meta charset="utf-8">
    <meta name="description" content="JavaScript példák">

    <script src="utils.js"></script>
    <script src="./view_para.js"></script>

    <style type="text/css">
        #bal {
            width: 48%;
            border: 1px solid red;
            padding: 1em;
        }

        #bal p {
            display: none;
        }

        #bal p:nth-child(1) {
            display: block;
        }

        #jobb {
            width: 48%;
            float: right;

        }

    </style>



</head>

<body>

    <div id="jobb">
        <form id="gombok">
            <span>
                <input type="button" name="previous" value="Előző">
                <input type="button" class="toggle" href="#bal" name="next" value="Következő">
            </span>
        </form>
    </div>

    <div id="bal" class="sib">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 
            semper felis in nunc tincidunt lacinia. Aenean interdum,
            lorem pretium maximus euismod, dolor tellus porta velit, sed 
            dapibus ex velit non ante. Morbi consequat rhoncus
            erat, a laoreet felis commodo eget. Phasellus sed justo nibh. 
            Quisque ut felis malesuada, dictum erat vel, vehicula
            nunc. Sed quis facilisis enim. Sed non magna nisl. Duis 
            pellentesque tempus mollis.</p>
        <p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in 
           nulla nulla. Praesent dignissim justo at lorem
            tempus molestie. Nunc interdum, justo non iaculis mollis, quam 
            ipsum mollis massa, id dignissim odio purus quis
            ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam 
            scelerisque purus ut risus interdum, et vehicula
            augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit 
            velit malesuada sed. In hac habitasse platea
            dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo 
            maximus dignissim. </p>
        <p>ellentesque convallis sapien eget tortor fermentum, nec consequat 
           lacus interdum. Sed id pulvinar risus, eu ornare
            tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices 
            consequat. Curabitur fermentum nibh quis sollicitudin
            condimentum. Integer a quam vitae quam fringilla consectetur. 
            Donec vehicula, risus sed sagittis condimentum,
            risus neque luctus mauris, accumsan consectetur lectus nisi id 
            tellus. Quisque eu sapien non lectus imperdiet
            tincidunt consequat non metus. Nulla egestas iaculis arcu sed 
            elementum. Praesent pellentesque sem purus. Nulla
            hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce 
            dapibus laoreet dui, sit amet ornare odio mollis
            non. In hac habitasse platea dictumst. Praesent non ex at nunc 
            ullamcorper interdum. </p>
        <p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu 
           augue. Duis est odio, interdum sit amet ullamcorper
            eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus 
            porttitor consectetur. Pellentesque ac enim vestibulum,
            eleifend arcu et, hendrerit ligula. Sed quis magna metus. 
            Quisque dignissim metus eget iaculis commodo.</p>
        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. 
           Vestibulum et est gravida, mattis arcu sed, ultricies
            elit. Sed vitae nisi ac lacus tincidunt varius et eu augue. 
            Etiam ultrices nunc vitae lacinia sagittis. Curabitur
            molestie ac tellus non porttitor. Suspendisse potenti. Praesent 
            facilisis semper iaculis. Sed justo enim, imperdiet
            vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In 
            imperdiet dui eget erat elementum egestas. Pellentesque
            eget urna vitae nulla dapibus euismod. Curabitur nisl diam, 
            pretium id mi posuere, molestie gravida justo. </p>
    </div>

但是，这不是您为这样的简单任务设计代码的方式。我写了一个简单得多的函数，它应该同样可以很好地完成任务。

var count = 0;

function bla() {
  var num = document.querySelectorAll("div#bal p").length - 1;
  if(count < 0) {
  	count = num;
  } else if (count > num) {
  	count = 0;
  }
  
  var all = document.querySelectorAll("div p");
  for (var i = 0; i < all.length; i++) {
    all[i].style.display = "none";
  }
  
  document.querySelectorAll("div p")[count].style.display = "block";
}

div > p {
  display: none;
}

div > p:first-child {
  display: block;
}

<div>
  <p>P1</p>
  <p>P2</p>
  <p>P3</p>
  <p>P4</p>
</div>
<button onclick="bla(count++);">Next</button>
<button onclick="bla(count--);">Previous</button>

即使使用您的示例（而不是简短的示例），此操作也很容易实现。

var count = 0;

function bla() {
  var num = document.querySelectorAll("div#bal p").length - 1;
  if (count < 0) {
    count = num;
  } else if (count > num) {
    count = 0;
  }

  var all = document.querySelectorAll("div#bal p");
  for (var i = 0; i < all.length; i++) {
    all[i].style.display = "none";
  }

  document.querySelectorAll("div#bal p")[count].style.display = "block";
}

#bal {
  width: 48%;
  border: 1px solid red;
  padding: 1em;
}

#bal p {
  display: none;
}

#bal p:nth-child(1) {
  display: block;
}

#jobb {
  width: 48%;
  float: right;
}

<div id="jobb">
  <form id="gombok">
    <span>
      <input type="button" onclick="bla(count--)" name="previous" value="Előző">
      <input type="button" onclick="bla(count++)" class="toggle" href="#bal" name="next" value="Következő">
     </span>
  </form>
</div>

<div id="bal" class="sib">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper felis in nunc tincidunt lacinia. Aenean interdum, lorem pretium maximus euismod, dolor tellus porta velit, sed dapibus ex velit non ante. Morbi consequat rhoncus erat, a laoreet felis
    commodo eget. Phasellus sed justo nibh. Quisque ut felis malesuada, dictum erat vel, vehicula nunc. Sed quis facilisis enim. Sed non magna nisl. Duis pellentesque tempus mollis.</p>
  <p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in nulla nulla. Praesent dignissim justo at lorem tempus molestie. Nunc interdum, justo non iaculis mollis, quam ipsum mollis massa, id dignissim odio purus quis ex. Ut a odio venenatis,
    malesuada diam et, blandit magna. Nam scelerisque purus ut risus interdum, et vehicula augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit velit malesuada sed. In hac habitasse platea dictumst. Ut non laoreet dolor. Nunc pellentesque nulla
    at justo maximus dignissim. </p>
  <p>ellentesque convallis sapien eget tortor fermentum, nec consequat lacus interdum. Sed id pulvinar risus, eu ornare tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices consequat. Curabitur fermentum nibh quis sollicitudin condimentum. Integer
    a quam vitae quam fringilla consectetur. Donec vehicula, risus sed sagittis condimentum, risus neque luctus mauris, accumsan consectetur lectus nisi id tellus. Quisque eu sapien non lectus imperdiet tincidunt consequat non metus. Nulla egestas iaculis
    arcu sed elementum. Praesent pellentesque sem purus. Nulla hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce dapibus laoreet dui, sit amet ornare odio mollis non. In hac habitasse platea dictumst. Praesent non ex at nunc ullamcorper interdum.
  </p>
  <p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu augue. Duis est odio, interdum sit amet ullamcorper eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus porttitor consectetur. Pellentesque ac enim vestibulum, eleifend arcu et,
    hendrerit ligula. Sed quis magna metus. Quisque dignissim metus eget iaculis commodo.</p>
  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et est gravida, mattis arcu sed, ultricies elit. Sed vitae nisi ac lacus tincidunt varius et eu augue. Etiam ultrices nunc vitae lacinia sagittis. Curabitur molestie ac tellus
    non porttitor. Suspendisse potenti. Praesent facilisis semper iaculis. Sed justo enim, imperdiet vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In imperdiet dui eget erat elementum egestas. Pellentesque eget urna vitae nulla dapibus euismod.
    Curabitur nisl diam, pretium id mi posuere, molestie gravida justo. </p>
</div>

Answer 2

我认为您有几个问题。

使用childNodes而不是子节点。尝试在其上设置样式时，需要使用子级来获取元素，而不是节点。参见here。
if(!content) return;，您需要检查是否存在“下一个”而不是内容，因为在上一段中，当下一个不存在时，内容将存在

var show = function (elem){
    elem.style.display = 'block';
};

var hide = function (elem){
    elem.style.display = 'none';
}

var toggle = function(elem, next){
    if (window.getComputedStyle(elem).display === 'block'){
        hide(elem);
        show(next);
        return;
    }
};

var count = 0;

document.addEventListener('click', function(event){
    if (!event.target.classList.contains('toggle')) return;
    event.preventDefault();
    var e = document.getElementById("bal");
    var content = e.children[count];
    count++;
    var next = e.children[count];
    if(!next) return;

    toggle(content, next);
}, false);

<!DOCTYPE html>
<html lang="hu">

<head>
    <title>JS példák</title>
    <meta charset="utf-8">
    <meta name="description" content="JavaScript példák">

    <script src="utils.js"></script>
    <script src="./view_para.js"></script>

    <style type="text/css">
        #bal {
            width: 48%;
            border: 1px solid red;
            padding: 1em;
        }

        #bal p {
            display: none;
        }

        #bal p:nth-child(1) {
            display: block;
        }

        #jobb {
            width: 48%;
            float: right;

        }

    </style>



</head>

<body>

    <div id="jobb">
        <form id="gombok">
            <span>
                <input type="button" name="previous" value="Előző">
                <input type="button" class="toggle" href="#bal" name="next" value="Következő">
            </span>
        </form>
    </div>

    <div id="bal" class="sib">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam 
            semper felis in nunc tincidunt lacinia. Aenean interdum,
            lorem pretium maximus euismod, dolor tellus porta velit, sed 
            dapibus ex velit non ante. Morbi consequat rhoncus
            erat, a laoreet felis commodo eget. Phasellus sed justo nibh. 
            Quisque ut felis malesuada, dictum erat vel, vehicula
            nunc. Sed quis facilisis enim. Sed non magna nisl. Duis 
            pellentesque tempus mollis.</p>
        <p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in 
           nulla nulla. Praesent dignissim justo at lorem
            tempus molestie. Nunc interdum, justo non iaculis mollis, quam 
            ipsum mollis massa, id dignissim odio purus quis
            ex. Ut a odio venenatis, malesuada diam et, blandit magna. Nam 
            scelerisque purus ut risus interdum, et vehicula
            augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit 
            velit malesuada sed. In hac habitasse platea
            dictumst. Ut non laoreet dolor. Nunc pellentesque nulla at justo 
            maximus dignissim. </p>
        <p>ellentesque convallis sapien eget tortor fermentum, nec consequat 
           lacus interdum. Sed id pulvinar risus, eu ornare
            tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices 
            consequat. Curabitur fermentum nibh quis sollicitudin
            condimentum. Integer a quam vitae quam fringilla consectetur. 
            Donec vehicula, risus sed sagittis condimentum,
            risus neque luctus mauris, accumsan consectetur lectus nisi id 
            tellus. Quisque eu sapien non lectus imperdiet
            tincidunt consequat non metus. Nulla egestas iaculis arcu sed 
            elementum. Praesent pellentesque sem purus. Nulla
            hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce 
            dapibus laoreet dui, sit amet ornare odio mollis
            non. In hac habitasse platea dictumst. Praesent non ex at nunc 
            ullamcorper interdum. </p>
        <p>Duis tortor leo, ultricies quis placerat vel, scelerisque eu 
           augue. Duis est odio, interdum sit amet ullamcorper
            eget, tincidunt et lectus. Aliquam erat volutpat. Donec tempus 
            porttitor consectetur. Pellentesque ac enim vestibulum,
            eleifend arcu et, hendrerit ligula. Sed quis magna metus. 
            Quisque dignissim metus eget iaculis commodo.</p>
        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. 
           Vestibulum et est gravida, mattis arcu sed, ultricies
            elit. Sed vitae nisi ac lacus tincidunt varius et eu augue. 
            Etiam ultrices nunc vitae lacinia sagittis. Curabitur
            molestie ac tellus non porttitor. Suspendisse potenti. Praesent 
            facilisis semper iaculis. Sed justo enim, imperdiet
            vitae aliquet id, tempor ut orci. Nunc sed risus arcu. In 
            imperdiet dui eget erat elementum egestas. Pellentesque
            eget urna vitae nulla dapibus euismod. Curabitur nisl diam, 
            pretium id mi posuere, molestie gravida justo. </p>
    </div>

Answer 3

(function() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var block = document.getElementById("block");
var paragraphs = block.getElementsByTagName("p");
var activeParagraphIndex = 0;
var paragraphsCount = paragraphs.length;

var show = function (elem){
    elem.style.display = 'block';
};

var hide = function (elem){
    elem.style.display = 'none';
}

var toggle = function(elem, next){
    if (window.getComputedStyle(elem).display === 'block'){
        hide(elem);
        show(next);
        return;
    }
};

next.addEventListener('click', function(event){
		var prev = paragraphs[activeParagraphIndex];
		activeParagraphIndex++;
		if(activeParagraphIndex === paragraphsCount) {
			activeParagraphIndex = 0;
		}
		var next = paragraphs[activeParagraphIndex];
		toggle(prev,next);
}, false);

prev.addEventListener('click', function(event){
		var prev = paragraphs[activeParagraphIndex];
		activeParagraphIndex--;
		if(activeParagraphIndex === -1) {
			activeParagraphIndex = paragraphsCount - 1;
		}
		var next = paragraphs[activeParagraphIndex];
		toggle(prev,next);
}, false);
})();

#block p:not(:first-child) {
    display:none;
}

<div id="block">
	<p>My first paragraph.</p>
	<p>My Second paragraph.</p>
	<p>My Third paragraph.</p>
	<p>My Fourth paragraph.</p>
</div>

<button id="prev">Prev</button>
<button id="next">Next</button>

</div>

此代码适用于 n 个段落。您可以根据需要添加任意数量。

如何使下一个/上一个段落在div中可见？

3 个答案: