Question

在CSS类更改后，我确实遇到了一些函数问题。

这是我的代码。

<html>
<head>
    <title>jQuery Animate Test</title>
    <style>
    .animatebox { width: 300px; margin: auto; height: 50px; background: grey; position: absolute; bottom: 250; padding-left: 10px;}
    .hiddenstuff { opacity: 0; } 
    .boxtitle { font-size: 18px; font-weight: 100;}
    .clear { clear: both;}
    .arrow_up { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
    .arrow_down { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
    p {margin: 15px 0 0 0;}
    </style>
    <script src="jquery-1.8.2.js"></script>

</head>
<body>

<h1>Animate Test</h1>
<div id="content">
<div class="animatebox">
<img class="arrow_up" height="35px" src="arrow_up.png"><p class="boxtitle">Lala Box</p>
<div class="clear"></div>
<p class="hiddenstuff">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata </p>
</div>
</div>


<script>

$(function() {
$('.arrow_up').click(function(){
   $('.arrow_up').attr('src',"arrow_down.png");
});
$('.arrow_up').click(function () {
    $('.arrow_up').addClass('arrow_down');
});
$('.arrow_up').click(function () {
    $('.arrow_up').removeClass('arrow_up');
});
});

$(".arrow_up").click(function () {
    $('.animatebox').animate ({
        height: '250px'
    }, 200 );
});

$(".arrow_up").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );
});

$(".arrow_up").click(function () {
    $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
    }, 200 );
});

$(".arrow_down").click(function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

});

$(".arrow_down").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );
});


$(".arrow_down").click(function () {
    $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});




</script>

</body>
</html>

单击向上按钮后，它将类更改为“arrow_down”，但向下动画的功能不会起作用吗？！？：/

更新

$("body").on("click", ".arrow_up", function () {
        $('.arrow_up').attr('src',"arrow_down.png");
        $('.arrow_up').addClass('arrow_down');
        $('.arrow_up').removeClass('arrow_up');

        $('.animatebox').animate ({
            height: '250px'
        }, 200 );

        $('.hiddenstuff').animate ({
            opacity: '1'
        }, 200 );

        $('.boxtitle').animate ({
            fontSize: '28px',
            fontWeight: '700'
        }, 200 );
    });

    $("body").on("click", ".arrow_down", function () {
        $('.arrow_down').attr('src',"arrow_up.png");
        $('.arrow_down').addClass('arrow_up');
        $('.arrow_down').removeClass('arrow_down');

        $('.animatebox').animate ({
            height: '50px'
        }, 200 );

        $('.hiddenstuff').animate ({
            opacity: '0'
        }, 200 );

        $('.boxtitle').animate ({
            fontSize: '18px',
            fontWeight: '100'
        }, 200 );
    });

Answer 1

$('.arrow_up')返回所有当前存在的元素的列表，其类为arrow_up。您的.arrow_down元素是动态创建的，因此当您在页面加载时绑定事件时，这些元素实际上并不存在。

您需要稍微不同地绑定事件，以便考虑动态创建的元素：

$('body').on('click', '.arrow_down', function() {
  ...

$('body').on('click', '.arrow_up', function() {
  ...

Answer 2

由于它是动态的，请使用on。此外，您可以缩短代码：

$("body").on("click", ".arrow_up", function () {
    $('.arrow_up').attr('src',"arrow_down.png");
    $('.arrow_up').addClass('arrow_down');
    $('.arrow_up').removeClass('arrow_up');

    $('.animatebox').animate ({
        height: '250px'
    }, 200 );

    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );

    $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
    }, 200 );
});

$("body").on("click", ".arrow_down", function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );

    $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});

您不需要为您要做的每件事都设置事件处理程序。这样就好了（可能性能稍好一点）

这是一个有效的jsFiddle

Answer 3

正如Blender在answer

中所述

$（'。arrow_up'）返回所有当前存在的元素列表，其中包含arrow_up类。您的.arrow_down元素是动态创建的，因此当您在页面加载时绑定事件时，这些元素实际上并不存在。

您需要稍微不同地绑定事件，以便考虑动态创建的元素：

请尝试以下代码：

// Arrow Up Click Event
$('body').on('click', '.arrow_up', function(){

   $('.arrow_up').attr('src',"arrow_down.png");
   $('.arrow_up').removeClass('arrow_up').addClass('arrow_down');

   $('.animatebox').animate ({
        height: '250px'
   }, 200 );

   $('.hiddenstuff').animate ({
        opacity: '1'
   }, 200 );

   $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
   }, 200 );
});

// Arrow Down Click Event
$('body').on('click', '.arrow_down', function(){ 

   $('.arrow_down').attr('src',"arrow_up.png");
   $('.arrow_down').removeClass('arrow_down').addClass('arrow_up');

   $('.animatebox').animate ({
       height: '50px'
   }, 200 );

   $('.hiddenstuff').animate ({
        opacity: '0'
   }, 200 );

   $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});

SEE A SMALL DEMO

Answer 4

您应该绑定ready事件中的所有事件，这样您就可以将脚本放在head中。

不要为每个要执行的操作绑定事件，您可以在事件处理程序中执行多个操作。此外，您可以链接jQuery方法，这样您就不必一遍又一遍地选择相同的元素。

绑定事件时，它们仅绑定在当时存在的元素上，因此.arrow_up的事件不会被绑定，因为代码运行时没有这样的元素。要处理更改的元素的事件，您需要使用委托而不是在元素上绑定事件。将委托绑定在不会更改的元素上，例如.animatebox元素。

$(function() {

  $('.animatebox').on('click', '.arrow_up', function(){
    $('.arrow_up').attr('src',"arrow_down.png").addClass('arrow_down').removeClass('arrow_up');
    $('.animatebox').animate ({
      height: '250px'
    }, 200 );
    $('.hiddenstuff').animate ({
      opacity: '1'
    }, 200 );
    $('.boxtitle').animate ({
      fontSize: '28px',
      fontWeight: '700'
    }, 200 );
  });

  $('.animatebox').on('click', '.arrow_down', function () {
    $('.animatebox').animate ({
      height: '50px'
    }, 200 );
    $('.hiddenstuff').animate ({
      opacity: '0'
    }, 200 );
    $('.boxtitle').animate ({
      fontSize: '18px',
      fontWeight: '100'
    }, 200 );
  });

});

Answer 5

为什么要在不断更改类的元素上使用事件..为什么不使用 ID 代替..也不需要单独编写每个事件。它们可以在一次事件中处理，并且可以减少混乱。

我已将id arrowImg 提供给Img元素..

  $(function() {
    $('#arrowImg').on('click', function() {
        var height = '250px';
        var opacity = '1';
        var fontSize = '28px';
        var fontWeight =  '700';
        if ($(this).hasClass('arrow_up')) {
            $(this).attr('src', "arrow_down.png").toggleClass()('arrow_down').removeClass('arrow_up');
        }
        else {
            height = '50px';
            opacity = '0';
            fontSize = '18px';
            fontWeight ='100';
            $(this).attr('src', "arrow_up.png").addClass('arrow_up').removeClass('arrow_down');
        }

        $('.animatebox').animate({
            height: height
        }, 200);
        $('.hiddenstuff').animate({
            opacity: opacity
        }, 200);
        $('.boxtitle').animate({
            fontSize: fontSize,
            fontWeight: fontWeight
        }, 200);
    });
});

通过删除重复的行...

可以更优化代码

DEMO HERE

UPDATED DEMO

CSS类更改后，jQuery函数不起作用

5 个答案: