HTML href到一個子元素

Question

這樣做有一個乾燥的方式，但我一直沒能找到它。

<a href="image.jpg"> <!-- Don't repeat "image.jpg" --> 
    <img src="image.jpg" /> <!-- HEY, you repeated "image.jpg" ! --> 
</a> 

Answer 1

甲DRY溶液並非沒有JavaScript或jquery的可行的。使用jQuery：

$("a").has("img").each(function(){ 
    $(this).find("img").attr("src", $(this).attr("href")); 
}); 

Answer 2

幹不應該採取極端，有時重複的代碼是在時間不可避免的或不切實際，如果你做A到B那麼A要到剛剛B到避免重複代碼。 HTML不是DRY可以真正應用的代碼。除非您使用JavaScript，否則沒有辦法讓5個相同的<div> s重複4次，而不會重複<div>。

這段代碼演示DRY與HTML。

目的

使點擊時去同一個地點3幅相同的圖像一行。

• 典型方式

  頂部3的圖像是重複的每個a > img集合的標記的典型方式。

• DRY方式

  底部3倍的圖像實際上是一個background-image與background-repeat屬性與repeat-y值垂直地重複。

代碼片段

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0 none transparent; 
 
} 
 
img { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.pic { 
 
    width: 610px; 
 
    height: 200px; 
 
    background: url(http://imgh.us/Lenna.png) repeat-x; 
 
    background-size: 200px 200px; 
 
}

<h3>Typical Way</h3> 
 
<p>3 <code>&lt;img&gt;</code> and 3 <code>&lt;a&gt;</code> 
 
</p> 
 
<a href='http://imgh.us/Lenna.png'> 
 
    <img src='http://imgh.us/Lenna.png'> 
 
</a> 
 
<a href='http://imgh.us/Lenna.png'> 
 
    <img src='http://imgh.us/Lenna.png'> 
 
</a> 
 
<a href='http://imgh.us/Lenna.png'> 
 
    <img src='http://imgh.us/Lenna.png'> 
 
</a> 
 

 

 
<h3>DRY way</h3> 
 
<p>1 <code>&lt;img&gt;</code> and 1 <code>&lt;a&gt;</code> 
 
</p> 
 
<a href='http://imgh.us/Lenna.png'> 
 
    <figure class='pic'></figure> 
 
</a>