1

所以我正在努力建立一种动画民意调查。当您单击每个问题的每个答案时，相应的圆圈会在右侧显示动画。

对我来说棘手的部分是，在第一个问题之后......假设有人从第一个问题中点击“Answer1”，然后在第二个问题上点击“Answer1”，然后在第二个问题上点击“Answer2”......而不是将初始圆圈动画返回到它的原始大小，（正如我所定义的）我需要它动画到一个百分比，以便两个圆圈现在相等，因为在上一个问题中选择了一个。有点像切换。

说得通？

这部分对我来说有点棘手，因为我只是在研究 JS/Jquery。任何帮助或建议将不胜感激！

这是我为 Question1 编写的 JS。

如您所见，我仅针对 Question1 将圆圈动画回 80 像素...但我知道对于其余问题，需要以某种方式按百分比配置（这是我卡住的地方）

/*myClick function - quiz1*/
function myClick() { /*answer1*/
$('ul li:nth-child(2)').on("click", function() {
    if ($(this).hasClass('active') === false) {
        $(this).addClass('active');
        $(this).siblings().addClass('deactive');
        $(this).siblings().removeClass('active');
        $(this).removeClass('deactive');
        if ($(this).hasClass('active')) {
            $('.circle1').animate({
                width: "+=3.0%",
                height: "+=3.0%"
            });
            percentage.html(1);
        }
        if ($('ul li:nth-child(3)').hasClass('deactive')) {
            $('.circle2').animate({
                width: "80px",
                height: "80px"
            });
            percentage2.html(0);
        }
          if ($('ul li:nth-child(4)').hasClass('deactive')) {
            $('.circle3').animate({
                width: "80px",
                height: "80px"
            });
           percentage3.html(0);
        }
    }
 }); /*answer2*/
 $('ul li:nth-child(3)').on("click", function() {
    if ($(this).hasClass('active') === false) {
        $(this).addClass('active');
        $(this).siblings().addClass('deactive');
        $(this).siblings().removeClass('active');
        $(this).removeClass('deactive');
        if ($(this).hasClass('active')) {
            $('.circle2').animate({
                width: "+=3.0%",
                height: "+=3.0%"
            });
          percentage2.html(1);   

        }
        if ($('ul li:nth-child(2)').hasClass('deactive')) {
            $('.circle1').animate({
                width: "80px",
                height: "80px"
            });
            percentage.html(0); 

        }
          if ($('ul li:nth-child(4)').hasClass('deactive')) {
            $('.circle3').animate({
                width: "80px",
                height: "80px"
            });
           percentage3.html(0); 
        }
      }
    }); /*answer3*/
    $('ul li:nth-child(4)').on("click", function() {
    if ($(this).hasClass('active') === false) {
        $(this).addClass('active');
        $(this).siblings().addClass('deactive');
        $(this).siblings().removeClass('active');
        $(this).removeClass('deactive');
        if ($(this).hasClass('active')) {
            $('.circle3').animate({
                width: "+=3.0%",
                height: "+=3.0%"
            });
             percentage3.html(1); 
        }
        if ($('ul li:nth-child(2)').hasClass('deactive')) {
            $('.circle1').animate({
                width: "80px",
                height: "80px"
            });
            percentage.html(0); 

        }
          if ($('ul li:nth-child(3)').hasClass('deactive')) {
            $('.circle2').animate({
                width: "80px",
                height: "80px"
            });
            percentage2.html(0); 

            }
        }
    });
  }

我知道这有点密集，所以任何类型的帮助、提示或任何东西都会非常棒。谢谢！

这是一个小提琴

4

0 回答 0