クリックコードの画像が長すぎます

-1

9つの画像のいずれかをクリックすると、別の画像が表示されるようにこのコードを作成しました（Photoshopでテキストを使用して画像を作成しました）。私のコードは正常に動作しますが、それは本当に長いです。誰もそれをもっと短くする方法を知っていますか？クリックコードの画像が長すぎます

Javascriptを：

\t $(document).ready(function() { /*Altijd aanroepen per script*/ 
 

 

 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange").src == "http://127.0.0.1:50150/img/thirdtwo.png") { 
 
\t   document.getElementById("imgClickAndChange").src = "http://127.0.0.1:50150/img/thirdtwohover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange").src = "http://127.0.0.1:50150/img/thirdtwo.png"; 
 
\t  } 
 
\t  }) 
 

 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange2', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange2").src == "http://127.0.0.1:50150/img/thirdone.png") { 
 
\t   document.getElementById("imgClickAndChange2").src = "http://127.0.0.1:50150/img/thirdonehover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange2").src = "http://127.0.0.1:50150/img/thirdone.png"; 
 
\t  } 
 
\t  }) 
 

 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange3', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange3").src == "http://127.0.0.1:50150/img/thirdthree.png") { 
 
\t   document.getElementById("imgClickAndChange3").src = "http://127.0.0.1:50150/img/thirdthreehover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange3").src = "http://127.0.0.1:50150/img/thirdthree.png"; 
 
\t  } 
 
\t  }) 
 

 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange4', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange4").src == "http://127.0.0.1:50150/img/thirdfour.png") { 
 
\t   document.getElementById("imgClickAndChange4").src = "http://127.0.0.1:50150/img/thirdfourhover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange4").src = "http://127.0.0.1:50150/img/thirdfour.png"; 
 
\t  } 
 
\t  }) 
 

 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange5', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange5").src == "http://127.0.0.1:50150/img/thirdfive.png") { 
 
\t   document.getElementById("imgClickAndChange5").src = "http://127.0.0.1:50150/img/thirdfivehover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange5").src = "http://127.0.0.1:50150/img/thirdfive.png"; 
 
\t  } 
 
\t  }) 
 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange6', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange6").src == "http://127.0.0.1:50150/img/thirdsix.png") { 
 
\t   document.getElementById("imgClickAndChange6").src = "http://127.0.0.1:50150/img/thirdsixhover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange6").src = "http://127.0.0.1:50150/img/thirdsix.png"; 
 
\t  } 
 
\t  }) 
 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange7', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange7").src == "http://127.0.0.1:50150/img/thirdseven.png") { 
 
\t   document.getElementById("imgClickAndChange7").src = "http://127.0.0.1:50150/img/thirdsevenhover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange7").src = "http://127.0.0.1:50150/img/thirdseven.png"; 
 
\t  } 
 
\t  }) 
 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange8', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange8").src == "http://127.0.0.1:50150/img/thirdeight.png") { 
 
\t   document.getElementById("imgClickAndChange8").src = "http://127.0.0.1:50150/img/thirdeighthover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange8").src = "http://127.0.0.1:50150/img/thirdeight.png"; 
 
\t  } 
 
\t  }) 
 
\t $(document) 
 
\t  .on('click', '#imgClickAndChange9', function changeImage() { 
 

 
\t  if (document.getElementById("imgClickAndChange9").src == "http://127.0.0.1:50150/img/thirdnine.png") { 
 
\t   document.getElementById("imgClickAndChange9").src = "http://127.0.0.1:50150/img/thirdninehover.png"; 
 
\t  } else { 
 
\t   document.getElementById("imgClickAndChange9").src = "http://127.0.0.1:50150/img/thirdnine.png"; 
 
\t  } 
 
\t  }) 
 

 

 

 
\t }); 
 
CSS:

#pictures { 
 
    background-color: rgb(35, 35, 35); 
 
    color: rgb(204, 55, 77); 
 
    text-align: center; 
 
    padding-top: 2%; 
 
    padding-bottom: 2%; 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    float: left; 
 
    overflow: hidden; 
 
    font-size: 30px; 
 
} 
 
.onethird { 
 
    margin-left: 1%; 
 
    margin-right: 1%; 
 
    margin-top: 5%; 
 
    width: 25%; 
 
}

<div id="pictures"> 
 
    <img src="img/thirdtwo.png" class="onethird" id="imgClickAndChange" onclick="changeImage()"></img> 
 
    <img src="img/thirdone.png" class="onethird" id="imgClickAndChange2" onclick="changeImage()"></img> 
 
    <img src="img/thirdthree.png" class="onethird" id="imgClickAndChange3" onclick="changeImage()"></img> 
 
    <img src="img/thirdfour.png" class="onethird" id="imgClickAndChange4" onclick="changeImage()"></img> 
 
    <img src="img/thirdfive.png" class="onethird" id="imgClickAndChange5" onclick="changeImage()"></img> 
 
    <img src="img/thirdsix.png" class="onethird" id="imgClickAndChange6" onclick="changeImage()"></img> 
 
    <img src="img/thirdseven.png" class="onethird" id="imgClickAndChange7" onclick="changeImage()"></img> 
 
    <img src="img/thirdeight.png" class="onethird" id="imgClickAndChange8" onclick="changeImage()"></img> 
 
    <img src="img/thirdnine.png" class="onethird" id="imgClickAndChange9" onclick="changeImage()"></img> 
 

 
</div> 
 
</div>

出典

2016-05-07 M.MFG

使用スイッチたstatments代わり – Riddell

ちょうど別の1が –

あなたがそれらを必要としない（と、それはそれらを使用するnot really good practiceです）として、onclick属性を削除します。 clickイベントハンドラはyur JSコードで設定されます。

これは、あなたのHTMLたとえば仕事をする必要があります。

$('.onethird').click(function(e){ 
    var old_src = $(this).attr('src'); 
    var new_src = old_src.indexOf('hover') > -1 ? old_src.replace('hover', '') : old_src.split(".")[0] + 'hover.png'; 
    $(this).attr('src', new_src); 
});

出典

2016-05-07 16:11:18

私は2つのことをお勧めします。まず、両方のあなたの要素にあなたのURLを入れてください。

<img src="img/thirdtwo.png" class="onethird" id="imgClickAndChange1" data-src="img/thirdtwo.png" data-srchover="img/thirdtwohover.png"></img>

その後、彼らはすべてあなたが行うことができ、そのパターンをたどるときのようなもの：

$(document).on('click', '.onethird', function() { 
    var $this = $(this); 

    if ($this.is('.hoverDisplayed')) { 
     //is hover, so we need to revert it 
     $this.attr('src', $this.data('src'); 
    } else { 
     //is not hover, so make it hover 
     $this.attr('src', $this.data('srchover'); 
    } 

    //toggle the class to reflect what it should be next time 
    $this.toggleClass('hoverDisplayed'); 
});

出典

2016-05-07 16:16:18 Taplar

function hoverFile(filename){ 
 
    if (filename.indexOf('hover') != -1){ 
 
     // remove hover 
 
     console.log('remove'); 
 
     var updatedFilename = filename.replace('hover',''); 
 
    } 
 
    else { 
 
     // add hover 
 
     console.log('add'); 
 
     var extension = filename.substr(filename.lastIndexOf('.')+1); 
 
     var originalFilename = filename.substr(0, filename.indexOf(".")); 
 
     var updatedFilename = originalFilename + 'hover.' + extension; 
 
    } 
 
    return updatedFilename; 
 
} 
 

 
$(document).ready(function() { /*Altijd aanroepen per script*/ 
 
    $('.onethird').click(function() { 
 
     console.log('before: ' + this.src); 
 
     this.src = hoverFile(this.src); 
 
     console.log('after:' + this.src); 
 
    }); 
 
});

<div id="pictures"> 
 
    <img src="img/thirdtwo.png" class="onethird"></img> 
 
    <img src="img/thirdone.png" class="onethird"></img> 
 
    <img src="img/thirdthree.png" class="onethird"></img> 
 
    <img src="img/thirdfour.png" class="onethird"></img> 
 
    <img src="img/thirdfive.png" class="onethird"></img> 
 
    <img src="img/thirdsix.png" class="onethird"></img> 
 
    <img src="img/thirdseven.png" class="onethird"></img> 
 
    <img src="img/thirdeight.png" class="onethird"></img> 
 
    <img src="img/thirdnine.png" class="onethird"></img> 
 
</div>

出典

2016-05-07 16:26:55 Kelvin

はこれを試してみてください。..

$(document).on('click', '.onethird', function changeImage() { 
    var imagePath = document.getElementsByClassName("onethird")[0].src; 
if (imagePath == "http://127.0.0.1:50150/img/thirdtwo.png") { 
     imagePath = "http://127.0.0.1:50150/img/thirdtwohover.png"; 
} 
else if (imagePath == "http://127.0.0.1:50150/img/thirdtwo.png") { 
     imagePath = "http://127.0.0.1:50150/img/thirdtwohover.png"; 
} 
. 
. 
. 
. 

else{ 
     imagePath = "http://127.0.0.1:50150/img/thirdtwo.png"; 
} 

});

出典

2016-05-07 16:27:42 Nayan

...推敲を少し "私のコードが長すぎる" かゆみを得ましたOPが問題をよりよく理解するのを助けるかもしれない。 –

Unfortunarely私は他の人が投稿したことを知る前に、私はすでにあなたのための解決策を作成し始めました。ここで私はあなたのために書いたものです。

一般的なクラスの1つの一般的なclickイベントリスナーを使用して、クリックしたときに交換するすべての画像に適用できます。イメージをクリックすると、HTML要素で利用可能なdata-属性を使用して定義した名前のイメージがスワップされます。 jQueryの.attr()関数を使用しています。使用しているjQueryのバージョンがわからず、.data()はjQueryの以前のバージョンでは使用できません。これがあなたのためにうまくいくか、調整が必要かどうか、私に知らせてください。コードが下に掲載され、歓声！

はJavaScript

$(document).ready(function() { 
    var totalImages = 10; 
    var basePath = '/img/'; 
    var hoverClass = 'is-hover'; 
    var clickImageSelector = '.imgClickAndChange'; 

    function changeImage() { 
     var $img   = $(this); 
     var hoverImg = $img.attr('data-hover-img'); 
     var staticImg = $img.attr('data-static-img'); 

     if ($img.hasClass(hoverClass)) { 
      // Set Image SRC to staticImg if using hoverImg 
      // (determined by existance of hoverClass) 
      $img.attr('src', basePath + staticImg); 
      $img.removeClass(hoverClass); 
     } 
     else { 
      // Set Image SRC to hoverImg if using staticImg 
      // (determined by existance of hoverClass) 
      $img.attr('src', basePath + hoverImg); 
      $img.addClass(hoverClass); 
     } 
    } 

    $(document).on('click', clickImageSelector, changeImage); 
});

HTML

<div id="pictures"> 
    <img src="img/thirdone.png" class="imgClickAndChange onethird" data-static-img='thirdone.png' data-hover-img='thirdonehover.png' /> 
    <img src="img/thirdtwo.png" class="imgClickAndChange onethird" data-static-img='thirdtwo.png' data-hover-img='thirdtwohover.png' /> 
    <img src="img/thirdthree.png" class="imgClickAndChange onethird" data-static-img='thirdthree.png' data-hover-img='thirdthreehover.png' /> 
    <img src="img/thirdfour.png" class="imgClickAndChange onethird" data-static-img='thirdfour.png' data-hover-img='thirdfourhover.png' /> 
    ... 
    <img src="img/thirdnine.png" class="imgClickAndChange onethird" data-static-img='thirdnine.png' data-hover-img='thirdninehover.png' /> 
</div>

出典

2016-05-07 16:28:30 ManBearPixel

これはピープルです、ありがとう！ –

クリックコードの画像が長すぎます

答えて

関連する問題