Bu kodu nasıl kısaltabilirim?

bukr3j 797 gün önce

338 defa görüntülendi ve 1 kişi tarafından değerlendirildi

$(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.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (7)

makifgokce

796 gün önce

https://jsfiddle.net/b2e87o3r/

#009267

bukr3j

797 gün önce

Hepsinin iframe' i ayrı.

#009258

makifgokce

797 gün önce

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();
    })
});

#009257

bukr3j

797 gün önce

<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>

Örnek olarak bir yer.

#009256

makifgokce

797 gün önce

buttonlara aynı class ı verip ve data attribute ü olarak iframe in idsini girerek aşağıdaki gibi tek 1 kod ile birden fazla iframe ve button u çalıştırabilirsin.
eğer iframeler aynı yerdeyse sadece görünürlüğünü değiştirerek işlem yapıyorsan tüm videoları aynı iframe ile kullanabilirsin.

<button class="myButton" data-video-id="8A7RWDgkXgg">
  Video 1
</button>
<button class="myButton" data-video-id="pl8W3ypHmbk">
  Video 2
</button>
<iframe id="myIframe" ></iframe>

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

#009255

bukr3j

797 gün önce

Tekrardan düzelttim, birden fazla iframe kullanıyorum bu yüzden (".myButton2") gibi 20 den fazla butonum var.

#009253

abdullahx

797 gün önce

Bundan daha kısa yazılmaz gibi

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

#009252