Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не работает скрипт в JQuery, дело в ES6 ? (https://javascript.ru/forum/jquery/80210-ne-rabotaet-skript-v-jquery-delo-v-es6.html)

Sagum 09.05.2020 18:18

Не работает скрипт в JQuery, дело в ES6 ?
 
Здраствуйте!

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

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

рони 09.05.2020 18:35

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

рони 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>

Rise 09.05.2020 20:42

Sagum,
document.querySelectorAll('.classА#'+id+' .classB').forEach(node => node.style.backgroundPosition = 'Х1 X2');

Sagum 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 - это класс у песни
Зарание спасибо

рони 17.05.2020 14:04

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

Sagum 17.05.2020 16:10

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

рони 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 25.05.2020 12:25

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


Часовой пояс GMT +3, время: 14:50.