CSS類更改後jQuery函數將無法工作

我實際上有一些CSS類更改後的函數有問題。CSS類更改後jQuery函數將無法工作

這是我的代碼。

<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」之類，但對於降動畫功能則不會工作後？！？：/

UPDATE

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

來源

2012-09-27 Basti

由於它是動態的，使用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-27 06:39:00

$('.arrow_up')返回與該類別的所有arrow_up目前本元素的列表。您的.arrow_down元素正在動態創建，因此當您在頁面加載時綁定事件時，這些元素實際上並不存在。

你需要略有不同綁定的事件，以考慮動態創建的元素：

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

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

來源

2012-09-27 06:36:27 Blender

你應該綁定在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-27 06:42:42 Guffa

由於攪拌機在他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

來源

2012-09-27 06:44:43

爲什麼你想在一個有變化的類的元素上使用事件..爲什麼不使用ID而不是..也沒有必要分別寫每個事件..他們可以處理在一個單一的事件，並減少很多困惑..

我給了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); 
    }); 
});

的代碼可以通過除去重複的線條更加優化...

DEMO HERE

UPDATED DEMO

來源

2012-09-27 07:06:56

對不起，前幾天用jquery啓動了：/ – Basti

CSS類更改後jQuery函數將無法工作

回答

相關問題