Изображение на клике слишком длинное

Question

Я сделал этот код, чтобы при щелчке одного из девяти изображений вы получили еще один (я сделал изображения с текстом в 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>

Answer 1

Удалить onclick атрибуты, как вам не нужны (и это not really good practice использовать их). click обработчики событий установлены в JS-коде yur.

Это должно сделать работу для 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); 
}); 

Answer 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'); 
}); 

Answer 3

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>

Answer 4

Попробуйте это ..

$(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"; 
} 

}); 

Answer 5

К сожалению, я уже начал работать над решением для вас, прежде чем увидел, что другие опубликованы, ну ладно! Вот что я написал для вас.

Я пошел с одним генератором событий click для общего класса, который вы можете применить ко всем своим изображениям, которые вы хотите поменять при нажатии. Когда изображение будет нажато, оно будет обмениваться изображениями с именами, которые вы определили, используя атрибут data-, доступный на элементах HTML. Я использую функцию 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>