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

Question

我当前的代码为 class“.movinglinecontainer”的所有实例设置动画。 我希望我的代码只为被点击的实例运行。

我尝试实现 $(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：

 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>