Объединение двух onclick функций

[Nezumi.May]

Здравствуйте! Помогите, пожалуйста объединить две функции.

Ссылки:

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

Получается, что две функции, которые срабатывают по нажатии на ссылку. Мне бы очень хотелось понять, как можно объединить в одну функцию. Спасибо.

[laimas]

<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 менять? 
});

[Nezumi.May]

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 уведомлений выскакивает, хотя должно только одно. Это и есть проблема. Перепробовала разные варианты, но моих знаний недостаточно, чтобы решить загадку.

[laimas]

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;
             //и т.д.
        }
});

[Nezumi.May]

laimas,

показать родителя. А что до этого он был скрыт, и как тогда щелкнули по ссылке?

Это для запоминалки. Когда перезагружаешь страницу спойлер закрыт, а нужно чтобы был открыт у выбранной ссылки. Поэтому такой код.

Можно в data атрибуте указать что угодно

Так то data.. а тут несколько сотен материалов с кодом, как я написала выше. Он уже очень старый, но хочется из него выжать максимум, поэтому одно на другое и наслаивается.

Можно как-то иначе сделать, чтобы панель, которая появляется после нажатия на серию, работала сразу, а не после перезагрузки? Вы мне очень поможете, если подскажите.

[laimas]

Когда перезагружаешь страницу спойлер закрыт, а нужно чтобы был открыт у выбранной ссылки.

Это понятно, но строка этого кода абсурдна. Если бы спойлеры открывались триггером по индексу, тогда еще можно было бы смирится, но ведь их же нужно как-то открывать пользователю, а значит есть элементы управления. Именно индекс элемента управления, которым открывается спойлер и нужно запоминать в хранилище. Зачем при этом хранить объект в нем как JSON не понятно, если только хранение не предполагает и ID видео, и тип.

Я не знаю как все на самом деле у вас организовано, но например:

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

Так то data.. а тут несколько сотен материалов с кодом

Можно как-то иначе сделать, чтобы панель, которая появляется после нажатия на серию, работала сразу, а не после перезагрузки?

Не понятно о чем речь.

[Nezumi.May]

строка этого кода абсурдна. Именно индекс элемента управления, которым открывается спойлер и нужно запоминать в хранилище. Зачем при этом хранить объект в нем как JSON не понятно, если только хранение не предполагает и ID видео, и тип.

Я что-то такое подозревала. Попробую так и сделать.

Не понятно о чем речь.

На сайте очень много материалов с ссылками вида:

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

})

[Белый шум]

<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() {
$('#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);
});
 
});

[laimas]

На сайте очень много материалов с ссылками вида:

И как хранится весь этот "вид"? Если как html в базе, то вы изначально подкладываете под себя мину. Но даже в этом случае не проблема привести данные к желаемому виду уж коли ваш вопрос изначально звучит "как объединить?". Для этого один раз подготовленным запросом к базе изменить в ней записи onclick="vidLoc('2888972',this,'3')" на data-avi="[2888972,3]". Запомните - цифровые значение обрамления кавычками не требуют. А this совсем не нужна, так как в обработчике щелчка по ссылке она и будет доступна.

Вы показываете свой код/проблемы кусками - по мере роста темы появляется все новое, ранее не оговоренное, трудно уследить что вы там делаете и чего хотите сделать. На данный момент видна проблема с назначением обработчиков в "pipipipi", а нужно либо делегировать обработку событий добавляемого блока, либо устанавливать их обработчики после добавления его в документ. А причем тут ссылки, которые могут работать после только после перезагрузки не понятно.

[Nezumi.May]

Белый шум, laimas,
Спасибо большое за помощь! Всё получилось, дальше я сама.