jquery - jQuery CSS 计数器

Question

我正在尝试创建一个针对多个 div 的函数，一次一个取决于变量。因此，如果他们单击按钮一次，它将显示 ID 为 #tip1 的提示，如果再次单击它，它将显示 #tip2 等。

        <script>
        var tipCount = 0;
        $('.subtitle').click({
            function () ({
                $('#tip'+tipCount++).toggleClass('visible');
            });
        });         
        </script>

我已经用谷歌搜索了一个多小时，但无法让它工作！

Answer 1

    var tipCount = 0;
    $('.subtitle').click(
        function () {
            $('#tip'+tipCount).hide();
            $('#tip'+(tipCount++)).show();
        });     

Answer 2

var tipCount = 0;
$('.subtitle').click(function(){
    $('#tip'+tipCount++).toggleClass('visible');
});

鉴于您的语法，可能有错误(

Answer 3

主要问题是javascript格式不正确。这是方法的工作证明。

html

<h2 class="subtitle">Subtitle</h2>

<div id="tip1">This is tip 1</div>
<div id="tip2">This is tip 2</div>
<div id="tip3">This is tip 3</div>
<div id="tip4">This is tip 4</div>
<div id="tip5">This is tip 5</div>

css

.hidden{
    display: none;
}

javascript

var tipCount = 0;
$('.subtitle').click(function(){
    $('#tip'+tipCount++).toggleClass('hidden');
});

演示：http: //jsfiddle.net/7sgRu/

Answer 4

HTML

<button>bum</button
<div class="hidden" id="tip1">This is tip 1</div>
<div class="hidden" id="tip2">This is tip 2</div>
<div class="hidden" id="tip3">This is tip 3</div>
<div class="hidden" id="tip4">This is tip 4</div>
<div class="hidden" id="tip5">This is tip 5</div>

CSS

.hidden{
    display: none;
}

JavaScript

var tipCount = 1;
$('button').click(function(){
    if(tipCount==6){
        $('#tip5').addClass('hidden');
        tipCount=1;
    }    
    $('#tip'+tipCount).removeClass('hidden');
    tipCount--;
    $('#tip'+tipCount++).addClass('hidden');
    tipCount++;
});      

演示：http: //jsfiddle.net/7sgRu/4/