2017-01-05 8 views
-1

これを行うには乾燥した方法がありますが、それを見つけることができませんでした。子要素へのHTML href

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

? –

+0

の有無は関係ありません。ちょうどファイル名を繰り返す必要がない方法を欲しかった。 –

答えて

2

DRYソリューションは、javascriptやjqueryのなしには不可能です。 jQueryのを使用して:あなただけの繰り返しコードを避けるために、BにCを、その後Bに行った場合

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

これは素晴らしい作品で、余計な作業を大幅に節約できます。ありがとう@ kad –

+0

あなたは歓迎です:) – KAD

1

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

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

目的

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

  • 典型的な方法

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

  • DRY方法は

    底3枚の画像実際には1つbackground-imagerepeat-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>

関連する問題