Question

我有一个带有图像的href元素 - 另一个带有图像的链接。

我想将目标图片与点击链接中的图片交换。

目标：

<div class="mainPicture">
 <img src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF">
</div>

链接：

<li>  
  <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="return false;">   
 <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild">  
 </a>
</li>

<li>  
 <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="return false;">    
 <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel">  
 </a>
</li>

如何使用jQuery或Vanilla Js执行此操作？

Answer 1

您可以使用jQuery .attr()方法

    $("li a").click(function(){
       $(".mainPicture img").attr("src", $("img", this).attr("src"));
    });

文档：http://api.jquery.com/attr/

Answer 2

$("a").on("click", function() {
  $(this).siblings("img").first().attr("src", this.getAttribute("href"));
});

纯JS

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("a");

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function(e) {
      e.preventDefault();

      this.firstElementChild.setAttribute("src", this.getAttribute("href"));
    });
  }
});

Answer 3

首先，让我们给目标一个ID，以便在vanilla JS中使用：

<div class="mainPicture">
    <img id="targetImg" src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF">
</div>

然后你可以使用：

<li>  
    <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">   
        <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild">  
    </a>
</li>

<li>  
    <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">    
        <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel">  
    </a>
</li>

...但是我不确定您的href和rel属性应该如何在那里工作。

对于jQuery解决方案，最好单独留下onclick并使用此JavaScript代码：

$(function() {
    $("a.testColorbox.cboxElement").click(function() {
        $(".mainPicture img").attr("src", $("img", this).attr("src"));
    });
});

更改元素Onclick中的图像

3 个答案: