Question

单击输入图像时如何更改div上的图像我试过这个，但没有什么工作..？

控制甚至没有进入每个（）循环的if / else部分。

我的div有ID我是否需要每个div内的每个图像的ID来更改图像或DIV的ID足以更改div内的图像？

javascript＆amp; Jquery代码： -

var div_class_scrollable_Image = [
"Groung-Floor-Image" , "Floor-1-Image", "Floor-2-Image", "Floor-3-Image"
];

function show_area( parameter_image_array, parameter_image)
{

  // set img src

  // $("." + parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

  //$('.Floor-3 img').attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

  $(parameter_image_array).each(function(index, element) {
        if(element != parameter_image )
        {
          $(element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');

        }
        else
        {
          $(element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
        }
       //alert("hellooooo");
    });


}



Html code :---    
    <div id="images" class="scrollable">
        <div id="Groung-Floor" class="input">
            <input id="Groung-Floor-Image" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ" onclick="show_area( 'div_class_scrollable_Image', 'Groung-Floor-Image' )"  />
            <p >Groung-Floor</p>
            <hr>
        </div>
        <div id="Floor-1" class="input">
            <input id="Floor-1-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area('div_class_scrollable_Image', 'Floor-1-Image')"  />
            <p >1-Floor</p>
            <hr>
        </div>
        <div id="Floor-2" class="input">
            <input id="Floor-2-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png"  onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image')"  />
            <p >2-Floor</p>
            <hr>
        </div>
        <div id="Floor-3" class="input">
            <input id="Floor-3-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image', )"  />  
            <p >3-Floor</p>
            <hr>              
        </div>

    </div>

请建议

Answer 1

对不起，但你的代码几乎不可读......丑陋;-)我会给你这段代码作为改善你的代码的提示：

<强> HTML

<div>
    <input type="image" src="foo.jpg" data-alt-src="bar.jpg" class="swap" />
</div>

<强>的JavaScript

$(".swap").click(function () {
    $(".swap").each(function () {
        var alt = $(this).data("alt-src");
        $(this).attr("src", alt);
    });    
    //do other work if needed...
});

正如您所看到的，我使用 data - 属性直接在HTML标记中设置替代图像，然后我在click事件中读取它并替换当前的 src 使用替代图像。

Answer 2

感谢batu Zet或纠正阵列问题。

此链接回答了我的问题......
Programmatically change the src of an img tag

这有效： -

$(parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');

这也有效：---

  $(parameter_image_array).each(function(index, element) {
        if(element != parameter_image )
        {
          $("#" +element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');

        }
        else
        {
          $("#" + element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
        }

    });

更改div内的图像 - 图像ID数组

2 个答案: