Bu kodu nasıl kısaltabilirim? | Cevap #9257

$(function () {
	$(".myButton").on("click", function () {
	  var t = $(this).data("video-id"),
		i = $("#myIframe");
	  $(this).hide(), i.attr("src", "https://www.youtube.com/embed/" + t), i.show();
	});
  });

Bunu bir kaç tane videoyu farklı iframeler ile çıkarmak için kullanacağım, jQuery bilgim zayıf olduğundan hepsi için birer birer yazacaktım ama jQuery ile daha kısa bir şekilde yazabileceğimi öğrendim ama jQuery bilmiyorum ve JavaScript konusunda zayıfım.
Sayfam şu şekilde:

<div class="col-xl-4 col-md-6 col-sm-1">
	<div class="col-md-6" style="max-width: 510px; max-height: 290px" style="margin: 0px auto !important">
        <iframe id="myIframe5" width="510" height="290" style="display: none;" src="" frameborder="0" allowfullscreen="autoplay" style="border: 1px solid black;"></iframe>
	    <img src="../img/videos/tanjant.webp" width="510" height="290" class="myButton4" data-video-id="fB9-trYPzu4" style="width: 510px; height: 290px; object-fit: fill; border-radius: 5px;">
	<div>
	<h4>Tanjant İzleme ile Otomatik Birleştirme</h4>
</div>

Bundanda bir kaç tane var ve iframeler ayrı yerlerde -resimlerin olduğu yerde- çıkıyor.

butonların classlarının hepsini myButton olarak değiştir ve attribute olarak data-iframe-id="myIframe5" gibi iframe in idsini gir Jquery kodunuda aşağıdaki gibi kullan

<iframe id="myIframe5" width="510" height="290" style="display: none;" src="" frameborder="0" allowfullscreen="autoplay" style="border: 1px solid black;"></iframe>
<img src="../img/videos/tanjant.webp" width="510" height="290" class="myButton" data-video-id="fB9-trYPzu4" data-iframe-id="myIframe5" style="width: 510px; height: 290px; object-fit: fill; border-radius: 5px;">

$(function(){
    $(".myButton").on("click",function(){
        $(this).hide();
        $("#"+ $(this).data('iframe-id')).attr("src",`https://www.youtube.com/embed/${$(this).data("video-id")}`).show();
    })
});