JS Genel Fonksiyon Oluşturma

eminkurt 1150 gün önce

504 defa görüntülendi

Bu şekilde yaptığımda kendi oluşturduğum galerim üzerinden seçtiğim görselin yolu input'a düşüyor ve img etiketinde önizleniyor

<div class="fea-img">
	<img id="onizleme1" src=""> 
	<input type="text" id="img1" onchange="preview()">
</div>

function preview() {
  var x = $('#img1').val();
  $("#onizleme1").attr("src",x);
}

Sayfada tek bir görsel önizlemesi yapacaksam problem değil fakat birden fazla görsel önizlemek istediğim zaman preview fonksyionunu çoğaltarak yapmak zorunda kalıyorum.

preview'i nasıl genel bir yapı haline getirebilirim?

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

abdullahx

1150 gün önce

<!doctype html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            display: flex;
        }
    </style>
</head>
<body>

<?php
$images = [
    'https://www.rastgeleresim.com/images/turkish-cuisine-480547_1280.jpg',
    'https://www.rastgeleresim.com/images/traffic-3612474_1280.jpg',
    'https://www.rastgeleresim.com/images/take-532097_1280.jpg',
    'https://www.rastgeleresim.com/images/tailor-2778734_1280.jpg',
    'https://www.rastgeleresim.com/images/white-cat-4134639_1280.jpg',
    'https://www.rastgeleresim.com/images/blue-mosque-908510_1280.jpg'
];
foreach ($images as $image) { ?>
    <div class="fea-img">
        <img src=""><br>
        <input type="text" value="<?= $image ?>" readonly><br>
        <button class="goster">Göster</button>
    </div>
<?php }
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function () {
        $(".goster").on("click", function () {
            $(this).siblings("img").attr({
                src: $(this).siblings("input").val(),
                width: 250,
                height: 250
            })
        })
    })
</script>
</body>
</html>

#007584

eminkurt

1149 gün önce

Tam olarak anlatamadım ama attığınız örneği biraz düzenleyerek istediğim şeye ulaştım teşekkürler

#007602