Объединение двух onclick функций
Здравствуйте! Помогите, пожалуйста объединить две функции.
Ссылки:
<div class="spoiler_body">
<a onclick="vidLoc('2877555',this,'3')">1</a>
<a onclick="vidLoc('2882250',this,'3')">2</a>
<a onclick="vidLoc('2888972',this,'3')">3</a>
</div>
Первая функция запоминает последнюю нажатую ссылку:
var _mem = localStorage;
var itm = $(".identifier:first").attr('id'),
idx = !!_mem['items'] && JSON.parse(_mem['items']) || {};
a = $("div.spoiler_body > a").on("click", function() {
a.not($(this).addClass("eps")).removeClass("eps");
$(".eps").parent().css( "display", "block");
idx[itm] = a.index(this);
_mem['items'] = JSON.stringify(idx);
});
if(idx) a.eq(idx[itm]).trigger('click');
Вторая функция показывает видео:
function vidLoc(id,link,type) {
document.getElementById('player0').innerHTML = '<iframe src="'+id+'" frameborder="0" allowfullscreen="true"></iframe>';
}
Получается, что две функции, которые срабатывают по нажатии на ссылку. Мне бы очень хотелось понять, как можно объединить в одну функцию. Спасибо. |
<a data-avi="2877555">1</a> Что такое 3 вопрос.
a = $("div.spoiler_body > a").on("click", function() {
var b = $(this);
a.not(b.addClass("eps")).removeClass("eps");
//$(".eps").parent().css( "display", "block"); это как понять?
idx[itm] = a.index(b);
_mem['items'] = JSON.stringify(idx);
$('#player0').html('<iframe src="'+b.data('avi')+'" frameborder="0" allowfullscreen="true"></iframe>'); //а может просто src менять?
});
|
laimas,
//$(".eps").parent().css( "display", "block");
Ссылка (она же серия) находится под спойлером. Поскольку нажатая ссылка запоминается, когда перезагружаешь страницу - этот спойлер будет открытым. У меня несколько плееров, полная версия кода выглядит так:
function vidLoc(id,link,type)
{
if ( type == 1 ) {
document.getElementById('player0').innerHTML = '<iframe src="'+id+'" frameborder="0" allowfullscreen="true"></iframe>';
}
if ( type == 2 ) {
document.getElementById('player0').innerHTML = '<iframe src="//myvi.ru/player/embed/html/'+id+'" frameborder="0" allowfullscreen></iframe>';
}
if ( type == 3 ){
document.getElementById('player0').innerHTML = '<iframe src="//video.sibnet.ru/shell.php?videoid='+id+'" frameborder="0" scrolling="no" allowfullscreen></iframe>';
}
if ( type == 4 ){
document.getElementById('player0').innerHTML = '<iframe src="//rutube.ru/play/embed/'+id+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>';
}
if ( type == 5 ){
document.getElementById('player0').innerHTML = '<iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/100018160368189/videos/'+id+'/&show_text=0&width=666&height=354" frameborder="0" allowFullScreen="true"></iframe>';
}
if ( type == 6 ){
document.getElementById('player0').innerHTML = '<iframe src="https://drive.google.com/file/d/'+id+'/preview" frameborder="0" allowFullScreen="true"></iframe>';
}
if ( type == 7 ){
document.getElementById('player'+play).innerHTML = '<iframe src="https://ok.ru/videoembed/'+id+'" frameborder="0" allowfullscreen></iframe>';
}
}
Вообще, саму задумку можно посмотреть наглядно здесь: ссылка на сайт ссылка на скрипт При нажатии на серию - появляется панель под видео, которая работает только после перезагрузки. А если я добавляю функцию внутрь onclick
a = $("div.spoiler_body > a").on("click", function() {
// здесь функция появления панели
});
то всё работает сразу, без перезагрузки, но с каждым кликом переключение серий скачет на +2 позиции. Выключаю запоминание и сразу 10 уведомлений выскакивает, хотя должно только одно. Это и есть проблема. Перепробовала разные варианты, но моих знаний недостаточно, чтобы решить загадку. |
Nezumi.May,
по коду представленному не известно что и под чем находится, но для:
<div class="spoiler_body">
<a onclick="vidLoc('2877555',this,'3')">1</a>
</div>
код ваш будет означать следующее:
$(".eps") //текущая ссылка, она получила ранее этот класс, то есть можно было бы и просто $(this), у всех других этот класс удален
.parent() //получить родителя текущей ссылки, а это spoiler_body в которой она и находится
.css( "display", "block"); //показать родителя. А что до этого он был скрыт, и как тогда щелкнули по ссылке?
Можно в data атрибуте указать что угодно, можно так data-avi="2877555,1" - где вторая цифра и есть type, разбив по запятой это значение получим нужные. Можно так data-avi="[2877555,1]", тогда JQ при получении этого значения сразу вернет массив:
a = $("div.spoiler_body > a").on("click", function() {
var b = $(this), d = b.data('avi'), p = $('#player0');
a.not(b.addClass("eps")).removeClass("eps");
//$(".eps").parent().css( "display", "block"); это так и не понять, да и вообще как было сказано, это будет b.parent().show();
idx[itm] = a.index(b);
_mem['items'] = JSON.stringify(idx);
switch(d[1]) {
case 1: p.html('<iframe src="'+d[0]+'" frameborder="0" allowfullscreen="true"></iframe>');
break;
case 2: p.html('<iframe src="//myvi.ru/player/embed/html/'+d[0]+'" frameborder="0" allowfullscreen></iframe>');
break;
//и т.д.
}
});
|
laimas,
Цитата:
Цитата:
Можно как-то иначе сделать, чтобы панель, которая появляется после нажатия на серию, работала сразу, а не после перезагрузки? Вы мне очень поможете, если подскажите. |
Цитата:
Я не знаю как все на самом деле у вас организовано, но например:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.box {
padding-top: 30px;
margin-bottom: 3px;
background-color: #999;
}
.spoiler_body {
display: none;
background-color: #fff;
}
</style>
<script>
$(function() {
var _mem = localStorage;
idx = !!_mem['items'] && _mem['items'] || 0;
var box = $('div.box').click(function() {
$(this).find('.spoiler_body').slideDown(300);
box.not(this).find('.spoiler_body').slideUp(300);
_mem['items'] = box.index(this); //запомнили спойлер
}).find('a').click(function() {
var d = $(this).data('avi');
//запуск фрейма
}).end();
box.eq(idx).trigger('click');
});
</script>
</head>
<body>
<div class="box"><div class="spoiler_body"><a data-avi="[11111,1]">111_1</a><br><a data-avi="[11111,2]">111_2</a></div></div>
<div class="box"><div class="spoiler_body"><a data-avi="[22222,1]">222_1</a><br><a data-avi="[22222,2]">222_2</a></div></div>
<div class="box"><div class="spoiler_body"><a data-avi="[33333,1]">333_1</a><br><a data-avi="[33333,2]">333_2</a></div></div>
</body>
</html>
Цитата:
Цитата:
|
Цитата:
Цитата:
<div class="spoiler_body">
<a onclick="vidLoc('2877555',this,'3')">1</a>
<a onclick="vidLoc('2882250',this,'3')">2</a>
<a onclick="vidLoc('2888972',this,'3')">3</a>
</div>
Поэтому не получится использовать вариант: <a data-avi="[33333,1]">333_1</a> А что касается Цитата:
a = $("#anime-online > div > div.spoiler_body > a").on("click", function() {
var nomser = $(this).text();
var melement=document.getElementById('pipipipi');
if(!melement){$('<div id="pipipipi"><i class="fa fa-step-backward" id="prevser"></i><span><span id="nomss">'+nomser+'</span> серия</span><i class="fa fa-step-forward" id="nextser"></i><a href="javascript://" id="zapominalka" class="nezapomn">Серия запомнена</a><a href="javascript://" id="kinoteatr">Режим кинотеатра</a></div>').insertBefore($("#anime-online"));}
else {document.getElementById('nomss').innerHTML = nomser;}
});
При клике на ссылку скрипт добавляет панель под плеер: <div id="pipipipi"><i class="fa fa-step-backward" id="prevser"></i><span><span id="nomss">'+nomser+'</span> серия</span><i class="fa fa-step-forward" id="nextser"></i><a href="javascript://" id="zapominalka" class="nezapomn">Серия запомнена</a><a href="javascript://" id="kinoteatr">Режим кинотеатра</a></div> Так вот ссылки на ней работают только после перезагрузки. А мне нужно, чтобы они работали сразу, но никак не получается это сделать. Скрипт управления панелью:
$(function() {
$('#prevser').click(function() {$( "a.eps" ).prev().trigger('click')});
$('#nextser').click(function() {$( "a.eps" ).next().trigger('click')});
$('#kinoteatr').click(function(){//скрипт кинотеатра});
$('#zapominalka').click(function() {
$(".zapomn").removeClass("zapomn").addClass("nezapomn");
document.getElementById('zapominalka').innerHTML = "Запоминание выкл.";
_uWnd.alert('Серия была успешно забыта','',{w:230,h:50,tm:2000});
delete idx[itm];
_mem['items'] = JSON.stringify(idx);
});
})
|
Цитата:
$(function() {
$('#anibox-pleer').on('click', '#prevser', function() {$( "a.eps" ).prev().trigger('click')});
$('#anibox-pleer').on('click', '#nextser', function() {$( "a.eps" ).next().trigger('click')});
$('#anibox-pleer').on('click', '#kinoteatr', function(){//скрипт кинотеатра});
$('#anibox-pleer').on('click', '#zapominalka', function() {
$(".zapomn").removeClass("zapomn").addClass("nezapomn");
document.getElementById('zapominalka').innerHTML = "Запоминание выкл.";
_uWnd.alert('Серия была успешно забыта','',{w:230,h:50,tm:2000});
delete idx[itm];
_mem['items'] = JSON.stringify(idx);
});
});
|
Цитата:
Вы показываете свой код/проблемы кусками - по мере роста темы появляется все новое, ранее не оговоренное, трудно уследить что вы там делаете и чего хотите сделать. На данный момент видна проблема с назначением обработчиков в "pipipipi", а нужно либо делегировать обработку событий добавляемого блока, либо устанавливать их обработчики после добавления его в документ. А причем тут ссылки, которые могут работать после только после перезагрузки не понятно. |
Белый шум, laimas,
Спасибо большое за помощь! Всё получилось, дальше я сама. |
| Часовой пояс GMT +3, время: 23:30. |