Home / Questions / 118190
Accepted
omaza1990
Asked: 2020-11-18 03:40:40 +0800 CST 2020-11-18 03:40:40 +0800 CST

将一张图片替换为另一张图片 - 事件 - Javascript - HTML

  • 772

我有一组存储在数组中的图像，我通过使用“foreach”循环遍历数组来显示它们。

我如何提取图像并显示它们的PHP 代码：

$imagenes = $cabana->getImagenes();
//Recorremos el foreach del array "$imagenes".
$first = true;
foreach($imagenes as $imagen){
    if($first){
        echo "<img id='grande' src='imagenes/".$imagen."' width='260' height='260'/> &nbsp;&nbsp;&nbsp;&nbsp;";
        $first = false;
    }else{
        echo "<img class='peque' src='imagenes/".$imagen."' width='140' height='140'/ onclick='cambiarImagen(this)'> &nbsp;&nbsp;&nbsp;&nbsp;";
    }
}

正如我们所看到的，就其余部分的大小而言，有一个优越的图像。

问题如下：我如何（从客户端，例如javascript）单击较小的图像之一以将其替换为较大的主图像？由于图像位于数组中，我如何知道要单击哪个图像？因为我只有一个 onClick 事件。

这个想法类似于下图：

在此处输入图像描述

javascript

3 Answers

  1. 您可以为每个小图像分配一个函数（使用属性onclick），您将向该函数传递关键字this。保留字this允许您引用正在与之交互的元素。

    这样一来，一旦获得了刚刚点击的图片的路径，就可以将其分配给大图。

    例子：

    var imagenGrande = document.getElementById("grande");

function cambiarImagen(imagen){
   imagenGrande.src = imagen.src;
}
    .peque{
   width: 100px;
}

#grande{
   width: 300px;
}
    <img class="peque" src="https://i2.wp.com/medioambienteynaturaleza.com/wp-content/uploads/2015/06/Fondos-de-pantalla-de-paisajes-naturales25.jpg" onclick="cambiarImagen(this)">
<img class="peque" src="http://losviajesdedomi.com/wp-content/uploads/2014/02/Cano-Cristales-Los-Ochos-1-600x399.jpg" onclick="cambiarImagen(this)">
<img class="peque" src="http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg" onclick="cambiarImagen(this)">
<img id="grande" src="http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg">

    应用于您的案例，您只需在 Javascript 中添加该函数，并在onclick使用语句打印它们时将属性添加到每个图像echo。

    • 6

  2. 首先你应该改变你的PHP，所以它或多或少是这样的

    $imagenes = $cabana->getImagenes();
//Recorremos el foreach del array "$imagenes".
$first = true;
foreach($imagenes as $imagen){
    if($first){
        echo "<img id='imggrande' src='imagenes/".$imagen."' width='260' height='260'/> &nbsp;&nbsp;&nbsp;&nbsp;";
        $first = false;
    }else{
        echo "<img src='imagenes/".$imagen."' width='140' height='140'/> &nbsp;&nbsp;&nbsp;&nbsp;";
    }
}

    请注意，我只在大图像中添加了一个 ID 字段，以便我可以参考jquery该图像。

    对于JavaScript，更具体地说jquery，将执行以下操作

    $("document.body").on("click", "img", function(){
     var pulsada = $(this).attr("src");
     $("#imggrande").attr("src", pulsada);
})

    唯一要做的jquery就是读取单击的图像，将其加载到单击的变量中，然后使用该方法修改scr大的attrjquery

    • 1
  3. Best Answer
    <script>  
     document.getElementById("file").addEventListener('change', cambiarImagen);
           function cambiarImagen(event){
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = (event) => {
                document.getElementById("picture").setAttribute('src', event.target.result);
            };
            reader.readAsDataURL(file);
           }
        </script>
    • 0