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
<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>
안녕하세요.
소스코드 잘 적용되네요.
감사합니다.