Question

我搜索并尝试了各种功能，包括＆＃39; if＆＃39;和＆＃39;其他＆＃39;功能，但我不能让他们工作..

目的是改变一张图像上的各种图像。以下是我目前正在使用的图片的HTML：

<div id="apDiv2"><a href="#" onclick="changeImg();"><img src="images/AJP-TAG-W.jpg" width="207" height="138" /></a></div>

我希望点击该图像来交换这两个图像

<div id="apDiv12"><a href="dancehall.html"><img src="images/Dancehall.jpg" width="240" height="74" alt="Dancehall" id="Dancehall" /></a></div>

和

<div id="apDiv6"><a href="house.html"><img src="images/House.jpg" width="240" height="74" alt="House" id="House" /></a></div>

Answer 1

我建议使用jQuery（https://code.jquery.com）并使用以下函数：

function changeImg()
{
    var tmp_src = $("#Dancehall").attr("src");
    $("#Dancehall").attr("src", $("#House").attr("src"));
    $("#House").attr("src", tmp_src);
}

或者基本的javascript解决方案：

function changeImg()
{
    var tmp_src = document.getElementById("Dancehall").src;
    document.getElementById("Dancehall").src = document.getElementById("House").src;
    document.getElementById("House").src = tmp_src;
}

Answer 2

您可以使用jQuery或基本Javascript隐藏或显示您的div。这是一个jQuery示例;

<div id="apDiv2"><a href="#" onclick="changeImg();"><img src="images/AJP-TAG-W.jpg" width="207" height="138" /></a></div>
<div style="display:none" id="apDiv12"><a href="dancehall.html"><img src="images/Dancehall.jpg" width="240" height="74" alt="Dancehall" id="Dancehall" /></a></div>
<div style="display:none" id="apDiv6"><a href="house.html"><img src="images/House.jpg" width="240" height="74" alt="House" id="House" /></a></div>
    <script>
    function changeImg(){
        $('#apDiv2').hide();
        $('#apDiv6').show();
        $('#apDiv12').show();
    }
    </script>

Answer 3

function changeImg() {
    var img1 = document.getElementById('apDiv12');
    var img2 = document.getElementById('apDiv6');
    var tmp = img1.innerHTML;
    img1.innerHTML = img2.innerHTML;
    img2.innerHTML = tmp;
}

Javascript函数，可以更改一个图像的各种图像

3 个答案: