jQuery를 사용하여 이미지에 클래스를 추가하는 방법은 무엇입니까?

Question

내 예제에서는 로켓 이미지가 있습니다. 내 목표는 대각선으로 페이지를 가로 질러 이동하고, 폭발하고, 사라지게하고, 웹 페이지가 클릭되면 로켓은 정상 상태와 위치로 돌아갑니다.

$(document).ready(function() { 
$('#rocket').click(function() { 
    $(this).animate({ 
     left: '+=800px', 
     top: '-=600px', 
    }); 
    $('#rocket').hide('explode', {pieces: 25}, 1000); 
}); 
}); 

$(document).ready(function() { 
    $('#normal').click(function() { 
     $('this').addClass('#rocket', 'unlaunched'); 
    }); 
}); 

지금까지 이동, 폭발하고 사라지는 작품 :

여기 내 jQuery 코드입니다. 그러나 웹 페이지를 클릭하면 로켓을 다시 정상으로 되돌릴 수 없습니다. 모든 조언을 크게 주시면 감사하겠습니다.

Answer 1

# 기호를 사용하고 있습니다. 이 시도이 줄 $('this').addClass('rocket', 'unlaunched');

에서이 기호를 제거 :

$(document).ready(function() { 
 
    $('#rocket').click(function() { 
 
     $(this).animate({ 
 
      left: '+=800px', 
 
      top: '-=600px' 
 
     }); 
 
    $('#rocket').hide('explode', {pieces: 25}, 1000); 
 
    }); 
 
    
 
    
 
    $('#normal').click(function() { 
 
     $('this').addClass('rocket', 'unlaunched'); 
 
    }); 
 
});

Answer 2

을 당신은 바로이 키워드를 사용하여 잘못된 일을 목표로하고 있습니다. 여기

당신이 jQuery를의 요소에 클래스를 추가하는 방법입니다 :

$(document).ready(function() { 
    $('#normal').click(function() { 
     $('#rocket').addClass('unlaunched'); 
    }); 
}); 

당신 도움 넣다 내 jsfiddle하세요! 문서 준비 기능에

https://jsfiddle.net/1k3oxjmh/

Answer 3

다시 로켓을 표시해야합니다

$(document).ready(function() { 
    $('#normal').click(function() { 
     $('#rocket').show(); 
    }); 
});