通过点击动态更改li选项

Question

$("#prev").click(function() {
  var elems = $('#smallTitle li a');
  var prev = elems.filter('.action');
  if ( prev.length === 0 ) prev = elems.last();

  elems.not( prev.addClass('action') ).removeClass('action');
});

$("#next").click(function() {
  var elems = $('#smallTitle li a');
  var next = elems.filter('.action').next();
  if ( next.length === 0 ) next = elems.first();

  elems.not( next.addClass('action') ).removeClass('action');
});

.SwitchURL-small-list{
    display:flex;
    list-style:none;
    font-size: 22px;
    font-weight:bold;
}

.SwitchURL-smaill-item{
    border-bottom: 0px solid#AE96DA;
    padding: 0 1%;
    margin-bottom: 1%;
    font-size: 20px;
}

.SwitchURL-small-link{
    color: #CFC1E9;
    margin-right: 15px;
    margin-left: 15px;
}

.SwitchURL-small-link:hover{
    color: #AE96DA;
}

.SwitchURL-small-link.action {
    border-bottom: 2px solid#AE96DA;
    color: #AE96DA;
    margin-right: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="SwitchURL-small-list" id="smallTitle">
  <button id="prev" type="button"> > </button>

  <li class="SwitchURL-small-item">
    <a href="AA" class="SwitchURL-small-link action" id="SwitchURL0">AA</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="BB" class="SwitchURL-small-link" id="SwitchURL1">BB</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="CC" class="SwitchURL-small-link" id="SwitchURL2">CC</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="DD" class="SwitchURL-small-link" id="SwitchURL3">DD</a>
  </li>
  <li class="SwitchURL-small-item">
      <a href="EE" class="SwitchURL-small-link" id="SwitchURL4">EE</a>
  </li>

  <button id="next" type="button"> > </button>
</ul>

我有一个<li>元素，里面使用href让用户点击到对应的文件。

<li>的样式如下：

现在<li>的选择是“AA”，当我点击下一个(>)按钮时，

<li>的选择会动态更改为“BB”，如下图所示：

或者当我点击上一个(<)按钮时，

<li>的选择会动态更改为“EE”，如下图所示：

并且现在显示的“AA”文件也会动态更改为“BB”或“EE”文件。

提示：可能需要使用removeClass("action")和addClass("action")来更改<li>，但我尝试了很多次，无法实现我的目标。

有人能帮我吗？谢谢 ;]

- ChaCha

---

你能分享一下你尝试过的JS代码吗？这样别人就可以帮助你，而不是自己创建整个代码。 - Chax

@Chax，我修改了我的代码，非常抱歉。请帮帮我，谢谢。 - ChaCha

@ChaCha，我在尝试帮忙，我认为JavaScript逻辑实现存在问题，让我发布代码。 - Obumuneme Nwabude

@ObumunemeNwabude 如果您解决了这个问题，我将非常感激并向您表示感谢。 - ChaCha

如果<button>元素没有被包含在<li>中，那么它们不应该在<ul>内部。 - Phil

你的CSS与你的图片不相符... - Mister Jojo

Answer 1

我认为最好的方法是跟踪当前"action"索引，在点击按钮时递增/递减该索引，并迭代链接列表，根据索引切换action类。

const links = $(".SwitchURL-small-link")
const modulo = links.length
let selectedIndex = links.index(".action")

$("#smallTitle button").on("click", function() {
  const inc = this.id === "next" ? 1 : -1
  selectedIndex = (((selectedIndex + inc) % modulo) + modulo) % modulo
  
  links.each((index, link) => {
    link.classList.toggle("action", index === selectedIndex)
  })
})

.SwitchURL-small-list {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
}

.SwitchURL-small-link.action {
  border-bottom: 2px solid#AE96DA;
  color: #AE96DA;
}

<!-- minified the HTML from your question -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="SwitchURL-small-list" id="smallTitle"><li class="SwitchURL-smaill-item"> <button id="prev" type="button"> &lt; </button></li><li class="SwitchURL-small-item"> <a href="AA" class="SwitchURL-small-link action" id="SwitchURL0">AA</a></li><li class="SwitchURL-small-item"> <a href="BB" class="SwitchURL-small-link" id="SwitchURL1">BB</a></li><li class="SwitchURL-small-item"> <a href="CC" class="SwitchURL-small-link" id="SwitchURL2">CC</a></li><li class="SwitchURL-small-item"> <a href="DD" class="SwitchURL-small-link" id="SwitchURL3">DD</a></li><li class="SwitchURL-small-item"> <a href="EE" class="SwitchURL-small-link" id="SwitchURL4">EE</a></li><li class="SwitchURL-smaill-item"> <button id="next" type="button"> &gt; </button></li></ul>

关于花式取模算法，请参考JavaScript % (modulo) gives a negative result for negative numbers.

- Phil

Answer 2

我想这应该可以工作。注释应该帮助您理解步骤。一旦您了解代码的工作原理，就可以将它们删除。

对于您的JavaScript：

$('#prev').click(function () {
  // the array of all five links
  var elems = $('#smallTitle li a');
  // get the index of the currently active link
  var activeIndex;
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].classList.contains('action')) {
      activeIndex = i;
      break;
    }
  }
  
  // get the index of the previous link
  var prevIndex = activeIndex - 1;
  if (prevIndex === -1) prevIndex = elems.length - 1;
  
  // change the active classes
  elems[activeIndex].classList.remove('action');
  elems[prevIndex].classList.add('action');
});

$('#next').click(function () {
  // the array of all five links
  var elems = $('#smallTitle li a');
  // get the index of the currently active link
  var activeIndex;
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].classList.contains('action')) {
      activeIndex = i;
      break;
    }
  }

  // get the index of the next link
  var nextIndex = activeIndex + 1;
  if (nextIndex === elems.length) nextIndex = 0;

  // change the active classes
  elems[activeIndex].classList.remove('action');
  elems[nextIndex].classList.add('action');
});

- Obumuneme Nwabude

---

欢迎，如果它起作用了，请告诉我。 - Obumuneme Nwabude

Answer 3

在JS中非常简单：

(function() // IIFE closure to protect variables
  {
  const
    links    = [...document.querySelectorAll('.SwitchURL-small-list >li > a.SwitchURL-small-link')]
  , len      = links.length
  , setActiv = n => links.forEach((el,ix)=> el.classList.toggle('action', ix===n))
    ;
  let  activItem = 0
  setActiv(activItem)
 
  document.querySelector('#prev').onclick = () =>
    {
    activItem = (activItem -1 + len) % len
    setActiv(activItem)
    }
  document.querySelector('#next').onclick = () =>
    {
    activItem = (activItem +1) % len
    setActiv(activItem)
    } 
  }
)()

ul {
  list-style  : none;
  font-size   : 2em;
  font-family : Arial, Helvetica, sans-serif;
  }
li {
  display : inline-block;
  width   : 1.3em;
  }
li a {
  color           : #d2bfe7;
  text-decoration : none;
  }
li a.action {
  color : #c249a4
  }
button {
  color      :  #7f7f7f;
  border     : none;
  background : none;
  font-size  : 1.4em;
  }

<ul class="SwitchURL-small-list" id="smallTitle">
  <button id="prev" type="button"> &lt; </button>

  <li class="SwitchURL-small-item">
    <a href="AA" class="SwitchURL-small-link" >AA</a>
  </li>
  <li class="SwitchURL-small-item">
    <a href="BB" class="SwitchURL-small-link" >BB</a>
  </li>
  <li class="SwitchURL-small-item">
    <a href="CC" class="SwitchURL-small-link" >CC</a>
  </li>
  <li class="SwitchURL-small-item">
    <a href="DD" class="SwitchURL-small-link" >DD</a>
  </li>
  <li class="SwitchURL-small-item">
    <a href="EE" class="SwitchURL-small-link" >EE</a>
  </li>

  <button id="next" type="button"> &gt; </button>
</ul>

- Mister Jojo

Answer 4

这里是一个纯JavaScript的例子。我为每个列表项添加了一个data-id属性，该属性对应于其在nodeList中的索引。我还为所有可能可点击的项目添加了一个class，包括按钮，我添加了button和btn类，以便我们可以评估包含next、prev和buttons的classList，以将适当的逻辑添加到条件语句中。我们还将我们的按钮包装在列表项标签中。

然后我使用[nodeList.length - 1]作为索引来获取最后一个列表项，nodeList[0]用于获取第一个列表项。我们为下一个和上一个按钮运行条件语句 => 如果e.target.classList.contains('next')，我们检查当前列表项current = document.querySelector('.action')是否为最后一个，如果是，我们将索引设置为0。如果classList中包含prev，并且索引为0，则将索引设置为[nodeList.length - 1]。然后我们在下一个上递增或在上一个上递减。如果事件目标是列表项，我们将event.target.classList.add('action')。

const buttons = document.querySelectorAll('.btn')
const smallItem = document.querySelectorAll('.SwitchURL-small-item')

function moveSelection(e) {
  // define the current set listitem
  let current = document.querySelector('.action')
  // remove the current actions class
  current.classList.remove('action')
  // define the event target
  const target = e.target
  // get the list-items dataset id
  let data = parseInt(current.parentNode.dataset.id)
  // conditional to check for next and prev buttons
  target.classList.contains('button') ?
    // conditional for next buttons
    target.classList.contains('next') ?
    // check if the list-item is the last one
    data === smallItem.length - 1 ?
    // lets add the action to the first list-item
    smallItem[0].children[0].classList.add('action') :
    // else lets add the data-id by one 
    // to get the index of the next element
    smallItem[data + 1].children[0].classList.add('action') : // we have the previous button
    // if we are on the first list-item
    data === 0 ?
    // set the action class to the last list-item
    // using smallItem.length - 1 to match 
    // proper index, 5 - 1 = 4 
    smallItem[smallItem.length - 1].children[0].classList.add('action') :
    // else we decrement the index by one
    smallItem[data - 1].children[0].classList.add('action') :
    // event target is a "small item" simply assign
    // it to the event target using classList.add()
    target.classList.add('action')
}

// iterate over all buttons 
buttons.forEach(btn => {
  // add event listener to each button and pass in 
  // callback for logic to determine button being clicked
  btn.addEventListener('click', moveSelection)
})

.SwitchURL-small-list {
  display: flex;
  list-style: none;
  font-size: 22px;
  font-weight: bold;
}

.SwitchURL-small-item {
  border-bottom: 0px solid#AE96DA;
  padding: 0;
  margin-bottom: 0;
  font-size: 20px;
  flex: 0;
}

.SwitchURL-small-link {
  color: #CFC1E9;
}

.SwitchURL-small-link:hover {
  color: #AE96DA;
}

.SwitchURL-small-link.action {
  border-bottom: 2px solid#AE96DA;
  color: #AE96DA;
}


/* added to control width of buttons */

.btn {
  flex: 0;
}


/* added for left margin of all buttons execpt first one */

li~li {
  margin-left: 1rem;
}

.prev {}

<ul class="SwitchURL-small-list" id="smallTitle">
  <li>
    <button class="btn button prev"> prev </button>
  </li>

  <li data-id="0" class="btn SwitchURL-small-item">
    <a href="#" class="SwitchURL-small-link action" id="SwitchURL0">AA</a>
  </li>

  <li data-id="1" class="btn SwitchURL-small-item">
    <a href="#" class="SwitchURL-small-link" id="SwitchURL1">BB</a>
  </li>

  <li data-id="2" class="btn SwitchURL-small-item">
    <a href="#" class="SwitchURL-small-link" id="SwitchURL2">CC</a>
  </li>

  <li data-id="3" class="btn SwitchURL-small-item">
    <a href="#" class="SwitchURL-small-link" id="SwitchURL3">DD</a>
  </li>

  <li data-id="4" class="btn SwitchURL-small-item">
    <a href="#" class="SwitchURL-small-link" id="SwitchURL4">EE</a>
  </li>

  <li>
    <button class="btn button next"> next </button>
  </li>
</ul>

- dale landry

Answer 5

您可以使用parent().children()的组合来访问 ul 的子元素。同时，当单击上一个或下一个按钮时，也会发生相同的功能，因此可以将其封装在一个单一的函数中。请注意：

function prevOrNext(str) {
  var temp, childType, nthChild;
  var elems = $('ul li');
  var current = elems.children('a.action').removeClass("action")

  if (str === "#prev") {
    temp = current.parent().prev()
    childType = ":first-child"
    nthChild = ":nth-last-child(2)";
  }
  if (str === "#next") {
    temp = current.parent().next()
    childType = ":last-child"
    nthChild = ":nth-child(2)";
  }

  if (temp.is(elems.parent().children(childType))) {
    elems.parent().children(nthChild).children('a').addClass('action')
  } else {
    temp.children('a').addClass("action")
  }
}

$("#prev").click(() => prevOrNext("#prev"))
$("#next").click(() => prevOrNext("#next"))

.SwitchURL-small-list{
    display:flex;
    list-style:none;
    font-size: 22px;
    font-weight:bold;
}

.SwitchURL-smaill-item{
    border-bottom: 0px solid#AE96DA;
    padding: 0 1%;
    margin-bottom: 1%;
    font-size: 20px;
}

.SwitchURL-small-link{
    color: #CFC1E9;
    margin-right: 15px;
    margin-left: 15px;
}

.SwitchURL-small-link:hover{
    color: #AE96DA;
}

.SwitchURL-small-link.action {
    border-bottom: 2px solid#AE96DA;
    color: #AE96DA;
    margin-right: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="SwitchURL-small-list" id="smallTitle">　　<li class="SwitchURL-small-item" id="front">　　　<button id="prev" type="button"> &lt; </button>　　</li>　　<li class="SwitchURL-small-item">　　　<a href="AA" class="SwitchURL-small-link " id="SwitchURL-leave">AA</a>　　</li>　　<li class="SwitchURL-small-item">　　　<a href="BB" class="SwitchURL-small-link" id="SwitchURL-leave">BB</a>　　</li>　　<li class="SwitchURL-small-item">　　　<a href="CC" class="SwitchURL-small-link action" id="SwitchURL-leave">CC</a>　　</li>　　<li class="SwitchURL-small-item">　　　<a href="DD" class="SwitchURL-small-link" id="SwitchURL-leave">DD</a>　　</li>　　<li class="SwitchURL-small-item">　　　<a href="EE" class="SwitchURL-small-link" id="SwitchURL-leave">EE</a>　　</li>　　<li class="SwitchURL-smaill-item" id="next">　　　<button id="next" type="button"> > </button>　　</li></ul>

- testing_22