Question

我认为这不是一个正确的问题，但无论如何都要问。我有多个段落和按钮专用于每个段落。单击按钮时，会将段落ID的名称添加到数组中。如果我按下另一个按钮，它会将那个添加到数组中，依此类推。然后，我将如何按照它们在数组中的顺序显示每个段落。我将如何显示隐藏的段落并将它们按照数组中所示的顺序放置。

var order = [];

		
		
		
		document.getElementById("par1Button").onclick = function() {

				var value = document.getElementById("par1Button").value
				
			order.push(value);
			alert(order)
		}

		document.getElementById("par2Button").onclick = function() {

		 var value = document.getElementById("par2Button").value
			order.push(value);
			alert(order)
		}
		
		document.getElementById("par3Button").onclick = function() {

				var value = document.getElementById("par3Button").value
			order.push(value);
			alert(order)
		}

<button id="par1Button" value="Par1">Par1</button>
<button id="par2Button" value="Par2">Par2</button>
<button id="par3Button" value="Par3">Par3</button>
		
<p id="par1" style="display:none;">This is text par1</p>		
<p id="par2" style="display:none;">this is the par 2</p>
<p id="par1" style="display:none;">and this is par 3</p>	
    </body>

Answer 1

每次点击，都会将ID附加到隐藏的字段或带有'，'或分隔符号的数组中
同样在每次点击时删除按钮，否则将添加相同的ID，这将更难管理......
最后拆分隐藏的值并按你的ID添加按顺序显示段落

它需要花一些时间，请尝试自己

Answer 2

你的问题不明确。根据我的理解，我希望这是你正在寻找的。

<body>
    <button name="toggle" id="par1Button" value="par1">Add Paragraph 1</button>
    <button name="toggle" id="par2Button" value="par2">Add Paragraph 2</button>
    <p id="par1" style="display:none;">This is text par1</p>
    <p id="par2" style="display:none;">this is the par 2</p>
    <button id="show">Show Paragraphs</button>
    <script>
        var listOfParagraphs = [];
        document.getElementsByName('toggle').forEach(function(btn) {
          btn.addEventListener('click', function(event) {
            listOfParagraphs.push(event.target.value)
          })
        })

        document.getElementById('show').addEventListener('click', function(e){
          if(listOfParagraphs.length >= 1) {
            listOfParagraphs.forEach(function(id) {
              document.getElementById(id).style.display = "block"
            })
          }
        })

    </script>
</body>

Answer 3

我不打扰CSS显示属性。只需相应地映射段落textContent即可。当您单击一个按钮时，它将在数组末尾添加相应的段落，并按照它们在parray数组中的顺序显示段落。再次单击按钮将从列表中删除相应的段落。

var pars = {
            par1: {id: "par1", textContent: "This is paragraph one"},
            par2: {id: "par2", textContent: "This is paragraph two"},
            par3: {id: "par3", textContent: "This is paragraph three"}
           },
    prgs = document.getElementsByTagName("p"),
 buttons = document.getElementsByTagName("button"),
  parray = [];

function displayPars(){
  var i = 0;
  for(var pel of prgs){
    parray[i] ? pel.textContent = parray[i].textContent
              : pel.textContent = "";
    i++;
  }
}

for(var button of buttons){
  button.addEventListener("click", function(e){
                                     var pid = e.currentTarget.id.substr(0,4),
                                         pix = parray.findIndex(p => p.id === pid);
                                     pix !== -1 ? parray.splice(pix,1)
                                                : parray.push(pars[pid]);
                                     displayPars();
                                   });
}

<button id="par1Button" value="Par1">Par1</button>
<button id="par2Button" value="Par2">Par2</button>
<button id="par3Button" value="Par3">Par3</button>

<p id="par1"></p>
<p id="par2"></p>
<p id="par3"></p>

根据数组定位文本

3 个答案: