子要素への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のを使用して：あなただけの繰り返しコードを避けるために、BにCを、その後Bに行った場合

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

Answer 2

DRYはコードを繰り返すの回で、極端に取られるべきではないことは時々避けられないか、非現実的です。 HTMLはDRYが本当にうまく適用できるコードではありません。 JavaScriptを使用しない限り、<div>を4回以上繰り返すことなく、5つの同じ方法を持つ方法はありません。

このスニペットではDRYとHTMLを示しています。

目的

クリックしたときに、同じ場所に移動し3枚の同一画像の行を作成します。

• 典型的な方法

  トップ3の画像は、各a > imgセットのマークアップを繰り返す一般的な方法です。

• DRY方法は

  底3枚の画像実際には1つbackground-imageがrepeat-yの値background-repeat性と垂直に繰り返されます。 Javascriptをなし

SNIPPET

* { 
 
    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>