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

这个更简单的功能怎么样。

＆＃13;

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');
}

＆＃13;

.rotating__active {
    display: block;
}

.rotating__inactive {
    display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个，简单得多

＆＃13;

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++;
}

＆＃13;

.rotating__active {
    display: block;
}

.rotating__inactive {
    display: none;
}

＆＃13;

<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>

＆＃13;

jQuery在循环中将Div从Active更改为Inactive

2 个答案: