Question

我不确定此问题是否得到了回答。我花了几个小时寻找这个，但没有运气。

无论如何，我基本上想要做的是改变少数跨度的内容，当另一个（让他们称之为主要）跨度具有类活动时。想象一下这样的事情：

<div class="arrow-left" id="prev"></div>
<span class="headline-p active" id="trail1">Trail 1</span>
<span class="headline-p" id="trail2">Trial 2</span>
<span class="headline-p" id="trail3">Trial 3</span>
<a class="arrow-right" id="next"></a>

<h3>Result <span id="result">1</span></h3>
<p>Test 1 = <span id="test1">1</span></p>
<p>Test 2 = <span id="test2">1</span></p>
<p>Test 3 = <span id="test3">1</span></p>
<h3>Gener result = <span id="g-result">10%</span></h3>

因此，在单击NEXT Trail 1后，对Trail 2进行了更改，并且跨度（结果，测试和g-result）中的所有值都随之改变。当Trail 2处于活动状态时，Result 1将更改为Result 2，而Tests将显示不同的值。

我的基本想法是让课程积极改变路径。但我对jquery / js并不是那么好，所以如果有人有更好的想法，我会很乐意听。

还有一件事，上面的代码是我所拥有的简化版本。我想得到正常的工作演示。

提前感谢您的帮助！我真的很感激任何提示或小提琴。

对于任何错误感到抱歉，这是我的第一篇文章，而且我不是英国人。

Answer 1

您可以考虑下面的代码，这会将活动类循环到下一个位置，并在您进入最后一个位置时返回第一个位置。

运行下面的代码，希望它有所帮助：

// Waiting the DOM's load
$(document).ready(function() {
  var id = null;
  var aux = null;
  
  // Registering click event and it's callback to the 'next' caller
  $('#next').on('click', function() {
    // Getting the actual active span
    aux = $('.headline-p.active').attr('id').split('trail');
    // The position
    id = aux[1];
    
    // Some console debugs
    //console.info('Actual position: '+id);
    //console.log('Numvber of DOM nodes: '+$('.headline-p').length);
    
    // Removing the active class
    $('.headline-p:eq('+(id - 1)+')').removeClass('active');

    // If you're in the last, it changes to the first position
    if (id == $('.headline-p').length) {
      $('.headline-p:eq(0)').addClass('active');

    // Jump to the next
    } else {
      $('.headline-p:eq('+id+')').addClass('active');
    }
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow-left" id="prev">prev</div>
<br />
<span class="headline-p active" id="trail1">Trail 1</span>
<span class="headline-p" id="trail2">Trial 2</span>
<span class="headline-p" id="trail3">Trial 3</span>
<br /><br />
<a class="arrow-right" id="next" style="cursor:pointer">next</a>

<h3>Result <span id="result">1</span></h3>
<p>Test 1 = <span id="test1">1</span></p>
<p>Test 2 = <span id="test2">1</span></p>
<p>Test 3 = <span id="test3">1</span></p>
<h3>Gener result = <span id="g-result">10%</span></h3>

Answer 2

在我的手机上会阻止我编写代码，但我昨晚为个人项目提供相同的逻辑

1）在每个结果上使用相同的类（就像你做了标题-p）并在你想要显示的结果中添加一个活动的类

2）将计数器初始化为0，当你点击next / prev

时，你会增加/减少

3）隐藏每个路径和结果而不激活课程，第一个路径和结果应该是可见的

4）获取每个路径和结果的列表，如var trails = $(.trails)

5）点击next / prev后，删除活动类，如$(.trails)[i-1].removeClass('active)（i - 1，如果你已经增加了计数器，如果你在此之前做了这个，那么）在两个路径和res

6）然后在当前路径和结果元素$(.trails)[i].addClass("active")上添加活动类（如果您在之后使用计数器，则添加i + 1）

Answer 3

如果您希望在没有任何库的情况下实现，可以尝试这种方法：

想法非常简单：

点击headline-p，更新所需的spans。
在next或prev上，将position设置为+1或-1，然后转到该索引。要保持一致的流量，您可以直接调用此元素的单击。

另外，我使用了Array.from这是ES6的一部分。如果您希望支持旧浏览器，请使用[].prototype.slice.call从HTMLCollection获取数组。

function registerEvents() {
  var spans = document.querySelectorAll('span[id^=trail]');
  for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener('click', function() {
      updateClass(this, updateSpan)
    })
  }

  var btns = document.querySelectorAll('#next, #prev');
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      setActiveElement(this.id === 'next' ? 1 : -1);
    })
  }
}

function setActiveElement(position) {
  var currentElement = document.querySelector('.headline-p.active');
  var allNodes = Array.from(document.querySelectorAll('.headline-p'));
  var index = allNodes.indexOf(currentElement);
  currentElement.classList.remove('active');
  var nextIndex = index + position;
  nextIndex = nextIndex < 0 ? allNodes.length - 1 : nextIndex % allNodes.length;
  var nextEl = allNodes[nextIndex];
  nextEl.classList.add('active')
  nextEl.click();
}

function updateClass(el, callback) {
  document.querySelector('.headline-p.active').classList.remove('active');
  el.classList.add('active')
  callback && callback()
}

function updateSpan() {
  var result = document.querySelectorAll("[id$=result], [id^='test']");
  var selectedText = document.querySelector('span.active').textContent;
  selectedText = selectedText.replace(/[^0-9]/g, '')
  for (var i = 0; i < result.length; i++) {
    result[i].textContent = selectedText;
  }
}

window.addEventListener('load', function() {
  registerEvents();
})

.active {
  color: blue
}

<div class="arrow-left" id="prev">prev</div>
<span class="headline-p active" id="trail1">Trail 1</span>
<span class="headline-p" id="trail2">Trial 2</span>
<span class="headline-p" id="trail3">Trial 3</span>
<div class="arrow-right" id="next">next</div>

<h3>Result <span id="result">1</span></h3>
<p>Test 1 = <span id="test1">1</span>
</p>
<p>Test 2 = <span id="test2">1</span>
</p>
<p>Test 3 = <span id="test3">1</span>
</p>
<h3>Gener result = <span id="g-result">10%</span></h3>

当不同的span具有类活动时，更改跨度的内容

3 个答案: