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

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

jquery css

更改CSS类后，jQuery函数将不起作用,jquery,css,Jquery,Css,在CSS类更改之后，我实际上在函数方面遇到了一些问题这是我的密码 <html> <head> <title>jQuery Animate Test</title> <style> .animatebox { width: 300px; margin: auto; height: 50px; background: grey; position: absolute; bottom: 250; padding-le

在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\u up'）

返回当前所有元素的列表，其类为

arrow\u up

。您的

.arrow\u down

元素正在动态创建，因此当您绑定页面加载上的事件时，这些元素实际上并不存在

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

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

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

$（'.arrow\u up'）

返回当前所有元素的列表，其类为

arrow\u up

。您的

.arrow\u down

元素正在动态创建，因此当您绑定页面加载上的事件时，这些元素实际上并不存在

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

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

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

由于它是动态的，请在上使用

。此外，您还可以将代码缩短一些：
$("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 );
});

您不需要为要做的每一件事都使用事件处理程序。这将很好（性能可能会更好一些）
这是一个正在工作的
由于它是动态的，请在

上使用

。此外，您还可以将代码缩短一些：
$("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 );
});

您不需要为要做的每一件事都使用事件处理程序。这将很好（性能可能会更好一些）
这是一个有效的
您应该将所有事件绑定到就绪
事件中，这样您就可以将脚本放入头部

不要为您想做的每件事绑定到事件上，您可以在事件处理程序中做多件事。此外，还可以链接jQuery方法，这样就不必反复选择同一个元素
绑定事件时，它们仅绑定在当时存在的元素上，因此不会绑定.arrow\u 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 );
  });

});

您应该在ready
事件中绑定所有事件，这样您就可以将脚本放在头中
不要为您想做的每件事绑定到事件上，您可以在事件处理程序中做多件事。此外，还可以链接jQuery方法，这样就不必反复选择同一个元素
绑定事件时，它们仅绑定在当时存在的元素上，因此不会绑定.arrow\u 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 );
  });

});

正如Blender在他的
$（'.arrow\u up'）返回当前所有arrow\u up类元素的列表。您的.arrow\u down元素是动态创建的，因此当您绑定页面加载上的事件时，这些元素实际上并不存在
您需要稍微不同地绑定事件，以便考虑动态创建的元素：
$('body').on('click', '.arrow_down', function() {
  ...

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

因此，请尝试以下代码：
// 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 );
});


 如Blender在其
$（'.arrow\u up'）返回当前所有arrow\u up类元素的列表。您的.arrow\u down元素是动态创建的，因此当您绑定页面加载上的事件时，这些元素实际上并不存在
您需要稍微不同地绑定事件，以便考虑动态创建的元素：
$('body').on('click', '.arrow_down', function() {
  ...

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

因此，请尝试以下代码：
// 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 );
});


 为什么要在类不断变化的元素上使用事件。。为什么不改用ID。。也没有必要把每一件事单独写下来。。它们可以在一个事件中处理，并且不会产生太多混乱
我已将id箭头Img提供给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);
    });
});

通过删除重复的行，代码可以得到更优化

为什么要在类不断变化的元素上使用事件。。为什么不改用ID。。也没有必要把每一件事单独写下来。。它们可以在一个事件中处理，并且不会产生太多混乱
我已将id箭头Img提供给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);
    });
});

通过删除重复的行，代码可以得到更优化

很抱歉，几天前用jquery开始的：/抱歉，几天前用jquery开始的：/