jQuery动画首次成功

Question

HTML

<div class="label">
  <div class="label-outer annotation-multi"><!-- Stuff --></div>

  <div class="select-word">
    <div class="select-content-front">
        <div class="select-content">
          <div class="select-content-main">
            <div id="select-word-4" class="select-word-link"><!-- Stuff --></div>
            <div id="select-word-5" class="select-word-link"><!-- Stuff --></div>
          </div>
        </div>
    </div>
  </div>

  <div id="select-4" class="select"><img class="select-close" src="img/close.svg" height="26" width="26"></img></div>
  <div id="select-5" class="select"><img class="select-close" src="img/close.svg" height="26" width="26"></img></div>

</div>

JS

 $('.label-outer.annotation-multi').click(function() {

        //Open "select-word" / Close

        if ($(this).parent().find('.select-word').css('visibility') == 'hidden') {

          $(this).parent().find('.select-word').css("visibility", "visible").css({
            transformOrigin: '150px 0px'
          }).transition({
            scale: 1,
            easing: 'easeOutExpo',
            duration: 600
          });
          //Annotation SelectWord schließen
        } else {
          $(this).parent().find('.select-word').css({
            transformOrigin: '150px 0px'
          }).transition({
            scale: 0,
            easing: 'easeOutExpo',
            duration: 600
          }, function() {
            $(this).parent().find('.select-word').removeAttr( 'style' );
          })
        }


        //Open Select-4 (Example)
        $(this).parent().find('.select').css({
          transformOrigin: '150px 0px'
        }).stop().transition({
          scale: 0,
          easing: 'easeOutExpo',
          duration: 600
        }, function() {
          $(this).parent().find('.select').css("visibility", "hidden");
        })

    });


    $('.select-word-link').click(function(){
        var selectID  = this.id.replace('-word', '');



    //Close select-word

                  $(this).parent().parent().parent().css({
                    transformOrigin: '150px 0px'
                  }).transition({
                    scale: 0,
                    easing: 'easeOutExpo',
                    duration: 600
                  }, function() {
                    $(this).parent().parent().parent().removeAttr( 'style' );
                  });


      //Open Select

          $("#"+selectID).css("visibility", "visible").css({
            transformOrigin: '150px 0px'
          }).stop().transition({
            scale: 1,
            easing: 'easeOutExpo',
            duration: 600
          });

    });


$(".select-close").click(function() {


  $(this).parent().parent().parent().parent().parent().parent().find('.select').css({
    transformOrigin: '150px 0px'
  }).stop().transition({
    scale: 0,
    easing: 'easeOutExpo',
    duration: 600
  }, function() {

    $(this).find('.select').removeAttr( 'style' );
  })
});

所以，我有一个jquery动画的问题：

如果我点击class“label- on”，弹出的"select-word“就会打开。然后，我在带有"select-word- link“类的链接上单击"select-word”。"select-word“弹出窗口关闭，然后"select”弹出窗口打开。然后我点击“选择”的关闭按钮，它就关闭了。

一切似乎都很正常，除了当我再次尝试单击“标签-外部”时，没有任何反应。当我签入chrome时，它应用了打开的"select-word“弹出窗口的类和可视性，但它什么也没有显示:/

我认为问题可能出在“$(”.select-close“)函数(.click() {”“中，但我就是找不到它。

Answer 1

只需将所有的父函数替换为：$(this).parents('.select-word')工作起来很棒。谢谢adeneo！