Jquery sorusu - seçime bağlı ikinci değişiklik
Merhaba,
Youtube benzeri bir sayfa oluşturdum. Bilgileri veritabanıma kaydediyorum, ordan çekiyorum.
Sağda liste yer alıyor solda ise o listeden seçilen başlığa göre video iframe yer alıyor.
Değişen Video iframe:
<div class="container">
<div class="video-container">
<iframe src="https://open.spotify.com/embed/episode/<?= $yayingetir[0]["episode"]; ?>" width="100%" height="232" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
</div>
</div>
//Aşağıdaki div içindeki açıklamada yukardaki episode göre değişsin istiyorum
<div class="card-body card bg-warning">
<p class="text text-justify">
<?= $yayingetir[0]["description"]; ?>
</p>
</div>
Tablodan seçim yaptığım kodlar:
<td>
<span style="cursor:pointer;margin-bottom:10px;" onclick="switchVideo('<?= $yayingetir[$i]['episode']; ?>');">
<div class="col-xs-12" id="vid-<?= $yayingetir[$i]['episode']; ?>">
<?= $yayingetir[$i]["baslik"]; ?>
</div>
</span>
</td>
Buda scriptim
$("#vid-<?= $yayingetir[0]["episode"] ?>").addClass('selected');
function switchVideo(videoId) {
$(".video-container iframe").attr('src', 'https://open.spotify.com/embed/episode/' + videoId + '?utm_source=generator');
$(".selected").removeClass('selected');
$("#vid-" + videoId).addClass('selected');
}
Bu kodlarla iframe içinden podcastin episodunu değiştiriyorum.
Fakat altına seçilen episoda bağlı olan video açıklamasını da getirmeye çalıştım ama yapamadım onu nasıl yapabilirim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
@tayfunerbilen hocam,
ben veritabanımda spotify episode id bilgisini, title ve descriptionı tutuyorum.
veritabanıma (yayınlarim tablomda) elle bilgi girişim var.
yukardaki işlemde kendi veritabanımdan başlıklarımı tabloya çekiyor, baslığa tıklandıkça videoid olarak iframe linkini değiştiriyorum. bu değişiklikle alttaki divin içinde yer alan description bilgisini değiştiremiyorum.
description bilgimde veritabanımda elle giriş olarak zaten var.
<?= $yayingetir[$i]["description"]; ?>
sadece podcast değişikliğinde (onclick ile) aynı anda o id ye bağlı kaydettiğim description da değişmeli.
iframe içeriğine ulaşmak için jquery'de .contents() metodunu kullanabilirsin ama güvenlikten dolayı büyük ihtimalle erişmen mümkün değil dolayısı ile istediğin şeyde bu aşamada pek mümkün görünmüyor :)
Çünkü iframe'i yeni bir url'le değiştirmek farklı şey, o çerçevenin içinden değer almak bambaşka. Eskiden tarayıcılar izin veriyordu ama artık muhtemelen vermiyordur.
Denemesi bedava tabi ki şu kodu deneyebilirsin
function switchVideo(videoId) {
$(".video-container iframe").attr('src', 'https://open.spotify.com/embed/episode/' + videoId + '?utm_source=generator');
$(".selected").removeClass('selected');
$("#vid-" + videoId).addClass('selected');
// iframe içinden <title> değerini almaya çalışır
const title = $(".video-container iframe").contents().find('title').html()
}
muhtemelen tarayıcı bunu neden yapamayacağını daha net söyleyecektir console'da.