Javascript 显示下一个上一个内容 appendchild

Question

我有多个 div 具有相同的 class，我只需要将 class 中的一个放入某个 id，它显示我的顺序不正确。而且如果我有一些下拉菜单，我会点击一些 div 和 class，需要在 id 中显示这个 class。这是我的代码，你能帮帮我吗？谢谢

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs((slideIndex += n));
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    document.getElementById("back").appendChild(x[i]);
  }
  x[slideIndex - 1].style.display = "block";
  document.getElementById("get").appendChild(x[slideIndex - 1]);
}

#get {
  height: 300px;
  width: 500px;
  border: 1px solid red;
  left: 100px;
  position: absolute;
}

#get .mySlides {
  display: block!important
}

<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<div id="back">
  <div id="one" class="mySlides">
    <span class="Tx1">111</span>
  </div>
  <div id="two" class="mySlides">
    <span class="Tx1">222</span>
  </div>
  <div id="three" class="mySlides">
    <span class="Tx1">333</span>
  </div>
</div>
<div id="get"></div>

Answer 1

在 javascript 中，第一个元素索引为零，而不是 1。

const
  dGet        = document.getElementById('get')
, dBack       = document.getElementById('back')
, slides      = document.querySelectorAll('.mySlides')
, slideSelect = document.querySelector('#slide-Selector')
, current = 
  { slide : null
  , index : 0
  , len   : slides.length
  }; 

  // add slideSelect option elements
for(let indx=0;indx<slides.length;++indx)
  slideSelect.add( new Option( `slide : ${indx+1}`, indx));

slideSelect.onchange =()=>
  {
  current.index = slideSelect.selectedIndex;
  plusDivs(0);
  }

  // init
plusDivs(0);

function plusDivs(n)
  {
    // more easy with a modulo...
  current.index = (current.index +n +current.len) % current.len;
  
  if (current.slide)
    dBack.appendChild( current.slide );
  
  current.slide = dGet.appendChild( slides[current.index] );

  slideSelect.selectedIndex = current.index; // added
  }

#get {
  height   : 300px;
  width    : 500px;
  border   : 1px solid red;
  left     : 100px;
  position : absolute;
  }
#back {
  display : none;
  }

<button onclick="plusDivs(-1)"><</button>
<button onclick="plusDivs(1)">></button>
<select id="slide-Selector"></select>
<div id="back">
  <div id="one" class="mySlides">
    <span class="Tx1">111</span>
  </div>
  <div id="two" class="mySlides">
    <span class="Tx1">222</span>
  </div>
  <div id="three" class="mySlides">
    <span class="Tx1">333</span>
  </div>
</div>
<div id="get"></div>

Javascript 显示下一个上一个内容 appendchild

Javascript show next prev content appenchild

html

javascript