簡略化してください：サムネイルと大きな画像の表示/非表示

私は非常に初心者ですので、このコードを単純化する助けが大好きです。簡略化してください：サムネイルと大きな画像の表示/非表示

私は一連のサムネイルを特定のパターンで配置しています。サムネイルをクリックすると、すべてのサムネイルが消えて表示されます。次に、大きな画像をクリックすると、大きな画像が消え、すべてのサムネイルが再び表示されます。各サムネイルには固有の位置があるため、各サムネイルには独自のdiv IDがあります。私はそれを行う方法を考え出しましたが、それは非常に繰り返しです。

HTML：

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big1();"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big2();"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big3();"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs1();"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs2();"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs3();"/></div> 
    ...etc 
</div> 

</body>

ではJavaScript：

get_big1() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large1').style.visibility='visible'; 
} 
get_thumbs1() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large1').style.visibility='hidden'; 
} 

get_big2() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large2').style.visibility='visible'; 
} 
get_thumbs2() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large2').style.visibility='hidden'; 
} 

get_big3() { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large3').style.visibility='visible'; 
} 
get_thumbs3() { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large3').style.visibility='hidden'; 
} 

</script>

より良い方法があるに違いありません！それは難しいことではないと私は想像しています、私はまだそれについて把握することはできません。前もって感謝します。

出典

2012-02-08 Kudra Ilse

たくさんあります。これに取り組む方法の私の心に来ること最初の、そして最も明白な画像IDを変更することを決定し、単一の関数に数値を渡すことだけである：

function get_thumbs(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
} 

<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div>

...そしてget_big()についても同じこと。

代わりにあなたが（ビッグまたはサムネイル）の条件の両方を扱うただ一つの機能を使用することができます多くの方法がありますが、あなたがこれを行うことができます

<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div> 
    ...etc 
</div> 
<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div> 
    ...etc 
</div>

出典

2012-02-08 03:37:04

これは素晴らしいです、ありがとうございます！ –

次の2つの関数にそれをすべてを作り、影響を受ける項目駆動するための入力を使用することによって簡素化することができます：

HTML：

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div> 

</body>

ではJavaScript：

get_big(id) { 
document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
document.getElementById('large'+id).style.visibility='visible'; 
} 
get_thumbs(id) { 
document.getElementById('thumbnailwrapper').style.visibility='visible'; 
document.getElementById('large'+id).style.visibility='hidden'; 
}

出典

2012-02-08 03:36:08

：

function get_img(id, type) { 
    if (type == 'big') { 
    document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
    document.getElementById('large' + id).style.visibility='visible'; 
    } 
    else if (type == 'thumb') { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
    } 
    else return false; 
}

とHTMLでのjQueryでは非常に簡単で簡単ですが、ここではそれを主張するつもりはありません.JavaScriptについて学びたいと思っていて、jQueryがたくさんのことからあなたを守ってくれるからです。あなたの関数や機能は、このように、一般的な呼び出しを作ってみましょう：

<style type="text/css"> 
    #largeimage_wrapper {visibility: hidden;} 
</style> 

</head> 

<body> 
<div id="thumbnail_wrapper"> 
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div> 
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div> 
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div> 
    ...etc 
</div> 


<div id="largeimage_wrapper"> 
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div> 
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div> 
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div> 
    ...etc 
</div> 

</body>

javascriptの

function get_thumbs(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='visible'; 
    document.getElementById('large' + id).style.visibility='hidden'; 
} 
function get_big(id) { 
    document.getElementById('thumbnailwrapper').style.visibility='hidden'; 
    document.getElementById('large' + id).style.visibility='visible'; 
}

出典

2012-02-08 03:39:35

jQueryのようなライブラリは、これははるかに簡単になりますが、ここではJavaScriptを使用してコードを向上させることができる方法です。

まず、クラスを組み込むようにhtmlを変更します。選択したアイテムを収集するためにこれらを使用します。また、インラインonclickハンドラを削除します。 jsとhtmlを混在させないようにしてください。

<div id="thumbnail_wrapper"> 
    <div class="thumbnail" id="thumbnail1"><img src="thumbnail1.jpg" /></div> 
    <div class="thumbnail" id="thumbnail2"><img src="thumbnail2.jpg" /></div> 
    <div class="thumbnail" id="thumbnail3"><img src="thumbnail3.jpg" /></div> 
</div> 


<div id="largeimage_wrapper"> 
    <div class="large" id="large1"><img src="thumbnail1.jpg" /></div> 
    <div class="large" id="large2"><img src="thumbnail2.jpg" /></div> 
    <div class="large" id="large3"><img src="thumbnail3.jpg" /></div> 
</div>

次に、スタイル属性を直接変更するのではなく、要素の表示を変更するためにCSSを使用すると便利です。これにより、スタイルの変更が簡単に行えます。

div#thumbnail_wrapper .hidden { visibility: hidden; } 
div.large .hidden { visibility: hidden; }

次はこれが含まれている要素や変更を行うJavaScriptコードのためのCSS、DOM構造を持つスタイリングの間に素敵な差別を作成するのonclickハンドラ

var thumbs = document.getElementsByClassName('thumbnail'); 
var large = document.getElementsByClassName('large'); 

for (var i = 0; i < thumbs.length; i++) { 
    thumbs[i].onclick = function() { 
     //hide all thumbs 
     document.getElementById('thumbnail_wrapper').classList.add('hidden'); 
     //show large image (i got lazy and sliced) 
     document.getElementById('large' + this.id.slice(-1)).classList.remove('hidden'); 
    }; 
} 

for (var i = 0; i < large.length; i++) { 
    large[i].onclick = function() { 
     //hide large image 
     this.classList.add('hidden'); 
     //show thumbs 
     document.getElementById('thumbnail_wrapper').classList.remove('hidden'); 
    }; 
}

を添付するのgetElementsByClassNameを使用することができます。

出典

2012-02-08 03:50:32 mrtsherman

簡略化してください：サムネイルと大きな画像の表示/非表示

答えて

関連する問題