jQueryループからアクティブなものからアクティブでないものへの変更

Question

私のコードを私が望むように動作させるいくつかの問題があります。私はクリック操作が行われたときにループ上に異なるdivを表示できるようにしたい。以下のスニペットでコードを添付しました。理想的には、ボタンをもう一度クリックすると、配列の最初のDivに戻り、要素にアクティブなクラスを配置することができます。

最初に起動したときに機能しますが、もう一度サイクルを実行しても機能しません。このはるかに簡単な機能について

var content = $('#rotationContent .central-text'); 
 

 
currentContent = 0; 
 

 
function ChangeContent() 
 
{ 
 
    currentContent++; 
 
    newContent = currentContent + 1; 
 
    
 
    if (newContent > content.length) { 
 
     currentContent = 1; 
 
     newContent = currentContent + 1; 
 
     
 
     $('[data-id="' + content.length + '"]').removeClass('rotating__active').addClass('rotating__inactive'); 
 
     $('[data-id="' + currentContent + '"]').removeClass('rotating__inactive').addClass('rotating__active'); 
 
    } else { 
 
     $('[data-id="' + currentContent + '"]').removeClass('rotating__active').addClass('rotating__inactive'); 
 
     $('[data-id="' + newContent + '"]').removeClass('rotating__inactive').addClass('rotating__active'); 
 
    } 
 
    
 
    console.log(currentContent); 
 
    console.log(newContent); 
 
}

.rotating__active { 
 
    display: block; 
 
} 
 

 
.rotating__inactive { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rotationContent" class="col-md-6 rotating__fixed"> 
 
    <div class="central-text rotating__active" data-id="1"> 
 
    <h3>RENT IT OUT</h3> 
 
    <h4>Shout it from the rooftops</h4> 
 
    <p>You’re never going to get your place rented if you don’t get it out there. We’ll get your ad onto all the major property sites, and a few of the smaller ones too.</p> 
 
    </div> 
 
    <div class="central-text rotating__inactive" data-id="2"> 
 
    <h3>MANAGE YOUR PROPERTIES</h3> 
 
    <h4>All together in one place</h4> 
 
    <p>Whether you’ve got one or 10 properties, manage them all in our state of the art management system. Rent collection records? Check. Repairs arranged? Check. 24/7 access? Check.</p> 
 
    </div> 
 
    <div class="central-text rotating__inactive" data-id="3"> 
 
    <h3>CHECK OUT YOUR TENANTS</h3> 
 
    <h4>Get the best in through the door</h4> 
 
    <p>Weed out the time wasters with our comprehensive referencing service. You’ll only get high-quality tenants legally entitled to rent in the UK.</p> 
 
    </div> 
 
    <div> 
 
    <button type="button" onclick="ChangeContent()">Click Me</button> 
 
    </div> 
 
</div>

Answer 1

方法。

var content = $('#rotationContent .central-text'); 
 
var currentContent = 1; 
 

 
function ChangeContent() { 
 
    currentContent++; 
 
    if (currentContent > content.length) { 
 
    currentContent = 1; 
 
    } 
 

 
    $('.central-text') 
 
    .removeClass('rotating__active') 
 
    .addClass('rotating__inactive'); 
 

 
    $('[data-id="' + currentContent + '"]') 
 
    .removeClass('rotating__inactive') 
 
    .addClass('rotating__active'); 
 
}

.rotating__active { 
 
    display: block; 
 
} 
 

 
.rotating__inactive { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rotationContent" class="col-md-6 rotating__fixed"> 
 
    <div class="central-text rotating__active" data-id="1"> 
 
    <h3>RENT IT OUT</h3> 
 
    <h4>Shout it from the rooftops</h4> 
 
    <p>You’re never going to get your place rented if you don’t get it out there. We’ll get your ad onto all the major property sites, and a few of the smaller ones too.</p> 
 
    </div> 
 
    <div class="central-text rotating__inactive" data-id="2"> 
 
    <h3>MANAGE YOUR PROPERTIES</h3> 
 
    <h4>All together in one place</h4> 
 
    <p>Whether you’ve got one or 10 properties, manage them all in our state of the art management system. Rent collection records? Check. Repairs arranged? Check. 24/7 access? Check.</p> 
 
    </div> 
 
    <div class="central-text rotating__inactive" data-id="3"> 
 
    <h3>CHECK OUT YOUR TENANTS</h3> 
 
    <h4>Get the best in through the door</h4> 
 
    <p>Weed out the time wasters with our comprehensive referencing service. You’ll only get high-quality tenants legally entitled to rent in the UK.</p> 
 
    </div> 
 
    <div> 
 
    <button type="button" onclick="ChangeContent()">Click Me</button> 
 
    </div> 
 
</div>

Answer 2

"動かない" の定義

var content = $('#rotationContent .central-text'); 
 

 
currentContent = 1; 
 

 
function ChangeContent() 
 
{ 
 
    $('.central-text').removeClass('rotating__active').addClass('rotating__inactive'); 
 
    $('[data-id="' + (currentContent%content.length+1) + '"]').removeClass('rotating__inactive').addClass('rotating__active'); 
 
currentContent++; 
 
}

.rotating__active { 
 
    display: block; 
 
} 
 

 
.rotating__inactive { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rotationContent" class="col-md-6 rotating__fixed"> 
 
    <div class="central-text rotating__active" data-id="1"> 
 
    <h3>RENT IT OUT</h3> 
 
    <h4>Shout it from the rooftops</h4> 
 
    <p>You’re never going to get your place rented if you don’t get it out there. We’ll get your ad onto all the major property sites, and a few of the smaller ones too.</p> 
 
    </div> 
 
    <div class="central-text rotating__inactive" data-id="2"> 
 
    <h3>MANAGE YOUR PROPERTIES</h3> 
 
    <h4>All together in one place</h4> 
 
    <p>Whether you’ve got one or 10 properties, manage them all in our state of the art management system. Rent collection records? Check. Repairs arranged? Check. 24/7 access? Check.</p> 
 
    </div> 
 
    <div class="central-text rotating__inactive" data-id="3"> 
 
    <h3>CHECK OUT YOUR TENANTS</h3> 
 
    <h4>Get the best in through the door</h4> 
 
    <p>Weed out the time wasters with our comprehensive referencing service. You’ll only get high-quality tenants legally entitled to rent in the UK.</p> 
 
    </div> 
 
    <div> 
 
    <button type="button" onclick="ChangeContent()">Click Me</button> 
 
    </div> 
 
</div>