Question

我想在两个以上的span类之间切换，最初它只显示一个类。是否有可能在Jquery的帮助下完成它。如果没有，任何其他方式来解决我的问题。

示例HTML代码

<li class="symbol"><span class="off">`</span><span class="on">~</span></li>

示例Jquery代码

$('.symbol span').toggle();

此代码工作正常。

工作Fiddle

但我想要的是

<li class="symbol"><span class="off">`</span><span class="on">~</span>
<span class="hinoff">a</span><span class="hinon">b</span></li>

和一些Jquery代码在这4个span类之间切换，最初只显示一个。

这意味着它最初会显示任何一个span类，比方说 span class =“off”，它显示'`'。现在我想点击我的元素切换到我的班级，让我们说 span class =“hinoff”，它应该显示'a'。

Answer 1

调用此函数应显示下一个span，并隐藏其他span。

function showNext() {
    var $shownElement = $('.symbol span:visible').first();
    var $elementToShow = $shownElement.next();
    console.log($elementToShow);
    if (!$elementToShow.length) $elementToShow = $('.symbol span').first();
    var $shownElement = $('.symbol span:visible');
    $('.symbol span').hide();
    $elementToShow.show();
}

Fiddle demo

Answer 2

要显示所选的范围并隐藏所有其他范围，只需隐藏它们并显示所需的范围：

$('.symbols span').hide();
$('.symbols span.' + selectedClass).show();

如何在Jquery中显示/隐藏2个以上的span类并在它们之间切换？

2 个答案: