jquery div 사이 내용 바꾸기 채택완료

안녕하세요

아래와 같이 클릭을 했을시 

image가 -> 대여(html)포함 으로 변경되게 할려면 어떻게 해야 되나요? 

감사합니다.

 

$(document).on('click','.overflow-hidden.absolute',function(e){
    이미지를 -> 테스트로 변경
});

 

 

<div class="overflow-hidden absolute inset-0">
    <picture class="flex w-full h-full">
        <img src="11.jpg"class="w-full h-full object-cover {$episodelistlist__visited_1}" onerror="this.src='./images/nothing_img1.jpg'">
    </picture>
    <img src="icon.svg" alt="icon" class="absolute left-2 top-2" width="16px" height="16px">
</div>

 

<div class="overflow-hidden absolute inset-0">
    <picture class="flex w-full h-full">
        <img src="11.jpg"class="w-full h-full object-cover {$episodelistlist__visited_1}" onerror="this.src='./images/nothing_img1.jpg'">
    </picture>
    <p class="whitespace-pre-wrap break-all break-words support-break-word font-badge !whitespace-nowrap rounded-5 absolute left-2 top-2 s10-bold-white bg-dark-red px-4" style="height: 16px; line-height: 18px;">대여</p>
</div>

 

답변 1개

채택된 답변
+20 포인트

Copy
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).on('click','.overflow-hidden.absolute',function(e){
    $(this).find('img.absolute').replaceWith('<p class="whitespace-pre-wrap break-all break-words support-break-word font-badge !whitespace-nowrap rounded-5 absolute left-2 top-2 s10-bold-white bg-dark-red px-4" style="height: 16px; line-height: 18px;">대여</p>');
});
</script>

<div class="overflow-hidden absolute inset-0">
    <picture class="flex w-full h-full">
        <img src="11.jpg"class="w-full h-full object-cover {$episodelistlist__visited_1}" onerror="this.src='./images/nothing_img1.jpg'">
    </picture>
    <img src="icon.svg" alt="icon" class="absolute left-2 top-2" width="16px" height="16px">
</div>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

안녕하세요.
소스코드 잘 적용되네요.
감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고