更改div -- image ID数组中的image

Question

如何在点击输入图片时更改div上的图片。

我试过了，但什么都不起作用..？

控制甚至没有进入each()循环的if/else部分。

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

javascript & 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- attribute直接在HTML标记中设置一个备用图像，然后在单击事件时读取它，并用备用图像替换当前的src。

Answer 2

您还可以将background-image:url("/path/image")用于Div，稍后将其更改为类似于document.getElementById(DivId).style.backgroundImage = "/path/new_image"的http://www.w3schools.com/css/css_background.asp

Answer 3

感谢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');
        }

    });