0

ですから、私が取り組んでいるものに少し行き詰まっています。

私はJqueryとJavascriptの世界にまったく慣れていないので、これを行うためのはるかに効率的な方法があると確信していますが、今のところ、これが私が持っているものです.

基本的に、ユーザーが「回答」をクリックすると、要素がページ上でアニメーション化されます。対応する「回答」をクリックするとアニメーション化される、一致する要素を持つ 2 つの回答があります。

現在、ユーザーが 1 つの回答を複数回クリックすると、引き続きアニメーションが表示されます。ユーザーが回答をクリックすると、アニメーションが 1 回だけ再生されて停止するため、ユーザーはそのままにするか、他の「回答」をクリックするとアニメーションを実行しますが、再バインドして再クリックする必要があります。2 つの回答 / 対応するアニメーションの間を行ったり来たりするようなものです。

再バインドに問題があるため、再度クリックできるようになります。ループの一種。

私がこれを説明してくれることを願っています! これで私を正しい方向に向けることができる人に感謝します。

これがJSで、Imの場所の下にFIDDLEがあります。

   /*answer1*/
$('ul#quiz li:nth-child(2)').on("click", function() {
  $(this).addClass('active');
  $(this).siblings().addClass('deactive');
  $(this).siblings().removeClass('active');
  $(this).removeClass('deactive');
  if ($('ul#quiz li:nth-child(3)').hasClass('deactive')) {
      $('.circle2').animate({
          width: "80px",
          height: "80px"
      });
  }
  if ($(this).hasClass('active')) {
      $('.circle1').animate({
          width: "+=3.5%",
          height: "+=3.5%"
      });
  }
 }); 
  /*answer2*/
 $('ul#quiz li:nth-child(3)').on("click", function() {
  $(this).addClass('active');
  $(this).siblings().addClass('deactive');
  $(this).siblings().removeClass('active');
  $(this).removeClass('deactive');
  if ($('ul#quiz li:nth-child(2)').hasClass('deactive')) {
      $('.circle1').animate({
          width: "80px",
          height: "80px"
      });
  }
   if ($(this).hasClass('active')) {
      $('.circle2').animate({
          width: "+=3.5%",
          height: "+=3.5%"
      });
    }
   });       

フィドル

4

1 に答える 1