javascript - 如何在单击时分别为每个元素设置动画？

Question

我当前的代码为类“.movi​​nglinecontainer”的所有实例设置动画。我希望我的代码只针对被点击的实例运行。

我尝试实现 $(this) 但我似乎无法使其正常工作。

function ani() {
  var loadingbar = jQuery('.movinglinecontainer');
  if (loadingbar.hasClass('movingline')) {
    loadingbar.removeClass('movingline').addClass('movinglinereverse');
  } else if (loadingbar.hasClass('movinglinereverse')) {
    loadingbar.removeClass('movinglinereverse').addClass('movingline');
  } else {
    loadingbar.addClass('movingline');
  }
};
jQuery(document).ready(function() {
  jQuery('.movinglinecontainer').on("click", function() {
    ani();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">Frequently Asked Questions</div>
<div class="faq-accordion" data-accordion-group="">
  <div data-accordion="" class="faq-main" onclick="ani();">
    <div data-control="" class="faq-title">
      <h4>Question goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden; transition: max-height 300ms ease 0s;">
      <div class="faq-content">
        <p class="answer-content">Answer goes here</p>
      </div>
    </div>
  </div>
  <div data-accordion="" class="faq-main" onclick="ani()">
    <div data-control="" class="faq-title">
      <h4>Question 2 goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden;">
      <div class="faq-content">
        <p class="answer-content">Answer 2 goes here!</p>
      </div>
    </div>
  </div>

Answer 1

您可以尝试将 $(this) 作为参数传递给您的函数:

function ani(loadingbar) {
  if(loadingbar) {
    if (loadingbar.hasClass('movingline')) {
      loadingbar.removeClass('movingline').addClass('movinglinereverse');
    } else if (loadingbar.hasClass('movinglinereverse')) {
      loadingbar.removeClass('movinglinereverse').addClass('movingline');
    } else {
      loadingbar.addClass('movingline');
    }
  }
  
};

jQuery(document).ready(function() {
  jQuery('.movinglinecontainer').on("click", function() {
    ani($(this));
  });
});

.movinglinecontainer {
  height: 20px;
  transition: width 3s linear;
  background: aqua; 
  width:30%
}

.movingline {
  width: 100%
}

.movinglinereverse {
  width: 30%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">Frequently Asked Questions</div>
<div class="faq-accordion" data-accordion-group="">
  <div data-accordion="" class="faq-main" onclick="ani();">
    <div data-control="" class="faq-title">
      <h4>Question goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden; transition: max-height 300ms ease 0s;">
      <div class="faq-content">
        <p class="answer-content">Answer goes here</p>
      </div>
    </div>
  </div>
  <div data-accordion="" class="faq-main" onclick="ani()">
    <div data-control="" class="faq-title">
      <h4>Question 2 goes here?</h4>
    </div>
    <div id="" class="movinglinecontainer"></div>
    <div data-content="" style="max-height: 0px; overflow: hidden;">
      <div class="faq-content">
        <p class="answer-content">Answer 2 goes here!</p>
      </div>
    </div>
  </div>