javascript - 尝试更改 Divs 然后恢复

Question

我希望能够单击 <div class="col-md-4'> 之一并将其变成 <div class="col-md-12">顺利地同时顺利地摆脱了剩余的md-4。当我再次单击 md-12 时，我希望它能够顺利地执行相反的操作..但无法弄清楚发生了什么。

当我当前单击 col-md-4 时，它会执行我想要的操作，减去平滑度，但不会恢复回来。如果我默认有一个 col-md-12 并删除 col-md-4 代码，col-md-12 将恢复为 4.. 但 4 到 12 到 4 就没有运气了。

这是为什么？

$(document).ready(function(){

  $('.col-md-4').click(function(){
    $(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
    $('.col-md-4').addClass('profiles-gone');
  });

  $('.col-md-12').click(function(){
    $(this).removeClass('col-md-12');
    $('.col-md-4').removeClass('profiles-gone');
    $(this).addClass('col-md-4');
  });
});

.col-md-12 { background-color: #A9F5BC }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="container-fluid">
  <div class="row">


    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica A</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p class="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica B</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica C</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为你执行代码时哪里没有.col-md-12。您需要使用 on 委托(delegate)您的事件:

$(document).ready(function() {
    $(document).on('click', '.col-md-4', function() {
        $(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
        $('.col-md-4').addClass('profiles-gone');
    }).on('click', '.col-md-12', function() {
        $(this).removeClass('col-md-12');
        $('.col-md-4').removeClass('profiles-gone');
        $(this).addClass('col-md-4');
    });
});

Working Example Code Snippet Below:

$(document).ready(function() {
  //  this will be parent container for events, 
  $(document)  //  it's usually best practice to use a "static parent" with ID, 
               //  but in this case, you appear to have none, 
               //  so we'll just use DOM (document)
    //  here's our first click event, assigned to work on element's having class "col-md-4"
    .on('click', '.col-md-4', function() {
      $(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
      $('.col-md-4').addClass('profiles-gone');
    })
    //  here's our 2nd click event, assigned to work on element's having class "col-md-12"
    .on('click', '.col-md-12', function() {
      $(this).removeClass('col-md-12');
      $('.col-md-4').removeClass('profiles-gone');
      $(this).addClass('col-md-4');
    });
});

.col-md-12 { background-color: #A9F5BC }

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica A</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p class="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica B</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
        <p class="about-long">lelelelelele</p>
      </div>
    </div>

    <div class="col-md-4">
      <div class="profile">
        <!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
        <h2>Veronica C</h2>
        <img src="http://placehold.it/250x250">
        <h3>Head of XYZ at XYZ</h3>
        <p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p>
        <p class="about-long">lelelelele</p>
      </div>
    </div>
  </div>
</div>