jquery - Jquery CSS カウンター

Question

変数に応じて一度に 1 つずつ、複数の div を対象とする関数を作成しようとしています。したがって、ボタンを 1 回クリックすると #tip1 の ID を持つヒントが表示され、もう一度クリックすると #tip2 などが表示されます。

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

私は1時間以上グーグルを使っていましたが、うまくいきません!

Answer 1

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

Answer 2

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/

Answer 3

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

あなたの構文を考えると、おそらくエラーが発生しました(

Answer 4

主な問題は、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/