Форум

Sagum · #1 (**permalink**) 09.05.2020, 18:18

Здраствуйте!

подскажите пожалуйста, как можно переписать
$('.classА#'+id+' .classB').css({'background-position' :'Х1 X2'}); в стандарте ЕS6? (Если причина в этом.),
так как в таком ввиде .css({'background-position' :'Х1 Х2'}) не меняется.
Смысл всего этого в том, что бы при нажатии на елемент списка менялся {'background-position' :'Х1 Х2'} только у этого елемента

Зарание спасибо!

рони · #2 (**permalink**) 09.05.2020, 18:35

Sagum,
что такое 'Х1 X2' и зачем тут классы '.classА#'+id+' .classB'?

рони · #3 (**permalink**) 09.05.2020, 18:55

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

при нажатии на елемент списка менялся {'background-position' :'Х1 Х2'} только у этого елемента

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        height: 100px;
        width: 100px;
       background-image: url(https://i.pinimg.com/736x/91/e6/0d/91e60d30a2889213918a7629ab351d92.jpg);
       background-position: 0px 0px;
       background-repeat: no-repeat;
       background-size: 100px 400px;
       margin-right: 10px;

    }
    body{
         display: flex;
         justify-content: center;
    }

    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <script>
$(function() {
   $('div').on('click', function() {
   $(this).css({'background-position': '0px -300px'})
})
});
  </script>

</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Sagum · #4 (**permalink**) 17.05.2020, 13:54

Здравствуйте!
К сожалению не получилось.
Может быть я не корректно описал проблемму, попробую еще раз:
Я пытаюсь написать mediaplayer, который состоит из самого player и списка песен.
Pядом с названием песни стоит значек play pause, который должен переключатся при клике на песню, причем только у данной песни.
Уменя иммется массив: songs = [
track_one=[0, 'Name-Song_1) ', song1.mp3', '231.026'],
…
track_twelve=[19, 'Name-Song_12 ', 'song12.mp3', '172.617143'],
];
список песен выводистся в виде в циклa.
И вот когда проиходит клик на новую песню
$('.song, .play-pause').on('click', function() {
let id = $(this).attr('id');
$('.song#'+id+' .play-pause__song').css({'background-position' :'-12px 2px'}); // плай и пауза это одна картинка
//"… здесь выполнается функция запуска новой песни."
});
play, pause не меняются у выбранной песни, но если в этой части $('.song#'+id+' .play-pause__song') убрать '.song#'+id+' и оставить только ' .play-pause__song', то все работает только смена плай на пауза проиходит у всех песен одновременно.
.play-pause__song — это класс у картинки с play, pause
.song - это класс у песни
Зарание спасибо

рони · #5 (**permalink**) 17.05.2020, 14:04

Sagum,
можно только гадать, какое на самом деле у вас html.

Sagum · #6 (**permalink**) 17.05.2020, 16:10

Cкажите пожалуста,
это часть $('.song#'+id+' .play-pause__song') в ЕS6 также выглядит или имет другой вид?

рони · #7 (**permalink**) 17.05.2020, 17:17

Sagum,

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

можно только гадать, какое на самом деле у вас html.

возможно вам нужно так

$('.song').on('click', '.play-pause', function(event) {
let id = event.delegateTarget.id;
$('#'+id+' .play-pause__song').css({'background-position' :'-12px 2px'}); // плай и пауза это одна картинка
//"… здесь выполнается функция запуска новой песни."
});

Sagum · #8 (**permalink**) 25.05.2020, 12:25

рони и Rise спасибо вам за ответы, но опять не работает.
Ладно буду думать дальше, еще раз спасибо.

Форум

Справочник

Discord чат

Курсы javascript