Форум

dron-tlt · #1 (**permalink**) 26.03.2016, 18:52

Добрый день всем. Плохо знаю js. Но нужно сделать нечто такое:
на js есть плеер, в нём треки, напртив каждого трека кнопочка - купить. Нужно чтоб при нажатии на эту кнопочку каким-то образом бралось название именно этого трека, который напротив кнопочки и сохранялось в некую переменную и потом уже автоматически вставлялось в некую форму на сайте.

Треки описаны вот так:

markup = {
                listItem:'<li class="track">' +
                            '<span class="title"></span>' +
                            '<span class="duration"></span>' +
                            '<a href="#" class="buy not-active" target="_blank"></a>'
                        '</li>'
            };

Функция создания списка треков вроде:

$tracks.find('.title').click(function() {
                    playlistAdvance($(this).parents('li').data('index'));
                });

Каждому треку присваивается свой индекс. Понимаю, что вряд ли что-то понятно, но может кто поймёт)
Мне кажется, немного схоже с интернет магазином - типо добавить в корзину.

m1lk1way · #2 (**permalink**) 26.03.2016, 20:40

Беру название трека, ложу в переменную track и для наглядности вывожу в input

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Track</title>
</head>
<body>
<li class="track">
	<span class="title">На лабутенах - Кто-то там</span>
	<span class="duration"></span>
	<a href="#" class="buy not-active">Купить</a>
</li>
<li class="track">
    <span class="title">Smells like teen spirit - Nirvana</span>
    <span class="duration"></span>
    <a href="#" class="buy not-active">Купить</a>
</li>
<form action="" method="post">
	<label for="">Вы покупаете трек - <input id="trackname" type="text" disabled=""></label>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(document).ready(function() {
			var track;
	    $('.buy').click(function(){
	    	track = ($($(this)).siblings('.title')).text();
	    	$('#trackname').val(track);
	    })
	});
</script>
</body>
</html>

dron-tlt · #3 (**permalink**) 28.03.2016, 21:15

Сообщение от m1lk1way

Беру название трека, ложу в переменную track и для наглядности вывожу в input

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Track</title>
</head>
<body>
<li class="track">
	<span class="title">На лабутенах - Кто-то там</span>
	<span class="duration"></span>
	<a href="#" class="buy not-active">Купить</a>
</li>
<li class="track">
    <span class="title">Smells like teen spirit - Nirvana</span>
    <span class="duration"></span>
    <a href="#" class="buy not-active">Купить</a>
</li>
<form action="" method="post">
	<label for="">Вы покупаете трек - <input id="trackname" type="text" disabled=""></label>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	$(document).ready(function() {
			var track;
	    $('.buy').click(function(){
	    	track = ($($(this)).siblings('.title')).text();
	    	$('#trackname').val(track);
	    })
	});
</script>
</body>
</html>

Спасибо огромное! Получилось сделать, теперь всё прекрасно работает. Вот, можете глянуть: клик
Может тогда ещё на один вопрос ответите?
Как сделать чтоб на одной странице было несколько jQuery плееров. Как не пытался что-то намудрить результат один - если больше одного плеера, то вообще перестают работать. Скрипт вызова плеера вот:

<script type="text/javascript">
        $(document).ready(function(){
            var description = 'Ну тут как бы наверное.. я хз чё.. просто типо может описание треков или ещё чё. вот';

            $('#player1').ttwMusicPlayer(brighton, {                                
                autoPlay:false, 
                description:description,
                jPlayer:{
                    swfPath:'assets/player/plugin/jquery-jplayer'
                }                                
            });            
        });
    </script>

m1lk1way · #4 (**permalink**) 29.03.2016, 21:35

dron-tlt,
Мне желательно видеть HTML, но навскидку скажу, что в HTML есть какой-то тег с id="player1"
Чтоб подключить второй - создаете ещё один(такой же) тег, только с любым id, к примеру id="player2" и инициализируете его как первый, в итоге даю код сразу для двух плееров, при условии что у второго id="player2"

<script type="text/javascript">
        $(document).ready(function(){
            var description = 'Ну тут как бы наверное.. я хз чё.. просто типо может описание треков или ещё чё. вот';
            var description2 = 'тут описание для второго плеера';
 
            $('#player1').ttwMusicPlayer(brighton, {                               
                autoPlay:false,
                description:description,
                jPlayer:{
                    swfPath:'assets/player/plugin/jquery-jplayer'
                }
            }); 
           $('#player2').ttwMusicPlayer(brighton, {                               
                autoPlay:false,
                description:description2,
                jPlayer:{
                    swfPath:'assets/player/plugin/jquery-jplayer'
                }
            });
        });
    </script>

dron-tlt · #5 (**permalink**) 30.03.2016, 19:04

m1lk1way,
Я так и делал, пробовал различные вариации - результат один: или плееры вообще не появляются, или просто перестают работать - не регагируют ни на что, ощущение, будто они конфликтуют между собой.

В консоле браузера пишутся какие-то ошибки скрипта

я думаю, может просто все служебные файлы плеера дублировать и назвать по другому и пустить как новый скрипт? больше не вижу решений..

Могу скинуть исходники, если надо. Повторюсь, сайт тут: lsb.pe.hu

m1lk1way · #6 (**permalink**) 31.03.2016, 20:02

вот пример страницы с сайта разработчика плеера, которым вы пользуетесь. На этой странице сразу 3 плеера.

Форум

Справочник

Discord чат

Курсы javascript