0

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 );
    });
4

5 に答える 5

1

ブレンダーが彼の答えで述べたように

$（'。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 );
});

小さなデモを見る

</ p>

于 2012-09-27T06:44:43.607 に答える
1

$('.arrow_up')のクラスを持つ現在存在するすべての要素のリストを返しますarrow_up。.arrow_down要素は動的に作成されるため、ページの読み込み時にイベントをバインドすると、それらの要素は実際には存在しません。

動的に作成された要素を考慮するために、イベントを少し異なる方法でバインドする必要があります。

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

$('body').on('click', '.arrow_up', function() {
  ...
于 2012-09-27T06:36:27.977 に答える
1

動的なので、 を使用します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があります

于 2012-09-27T06:39:00.847 に答える
0

クラスが常に変化する要素でイベントを使用する理由..代わりにIDを使用しないのはなぜですか ..また、各イベントを個別に記述する必要はありません..それらは単一のイベントで処理でき、混乱がはるかに少ない..

Img 要素にid arrowImgを指定しました。

  $(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);
    });
});​

繰り返しの行を削除することで、コードをより最適化できます...

デモはこちら

更新されたデモ

于 2012-09-27T07:06:56.743 に答える
0

イベント内のすべてのイベントをバインドする必要があります。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 );
  });

});
于 2012-09-27T06:42:42.807 に答える