Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2020, 18:18
Новичок на форуме
Отправить личное сообщение для Sagum Посмотреть профиль Найти все сообщения от Sagum
 
Регистрация: 09.05.2020
Сообщений: 4

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

подскажите пожалуйста, как можно переписать
$('.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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sagum,
что такое 'Х1 X2' и зачем тут классы '.classА#'+id+' .classB'?
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2020, 18:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2020, 20:42
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Sagum,
document.querySelectorAll('.classА#'+id+' .classB').forEach(node => node.style.backgroundPosition = 'Х1 X2');
Ответить с цитированием
  #5 (permalink)  
Старый 17.05.2020, 13:54
Новичок на форуме
Отправить личное сообщение для Sagum Посмотреть профиль Найти все сообщения от Sagum
 
Регистрация: 09.05.2020
Сообщений: 4

Здравствуйте!
К сожалению не получилось.
Может быть я не корректно описал проблемму, попробую еще раз:
Я пытаюсь написать 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 - это класс у песни
Зарание спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 17.05.2020, 14:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sagum,
можно только гадать, какое на самом деле у вас html.
Ответить с цитированием
  #7 (permalink)  
Старый 17.05.2020, 16:10
Новичок на форуме
Отправить личное сообщение для Sagum Посмотреть профиль Найти все сообщения от Sagum
 
Регистрация: 09.05.2020
Сообщений: 4

Cкажите пожалуста,
это часть $('.song#'+id+' .play-pause__song') в ЕS6 также выглядит или имет другой вид?
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2020, 17:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Sagum,
Сообщение от рони
можно только гадать, какое на самом деле у вас html.
возможно вам нужно так
$('.song').on('click', '.play-pause', function(event) {
let id = event.delegateTarget.id;
$('#'+id+' .play-pause__song').css({'background-position' :'-12px 2px'}); // плай и пауза это одна картинка
//"… здесь выполнается функция запуска новой песни."
});
Ответить с цитированием
  #9 (permalink)  
Старый 25.05.2020, 12:25
Новичок на форуме
Отправить личное сообщение для Sagum Посмотреть профиль Найти все сообщения от Sagum
 
Регистрация: 09.05.2020
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает скрипт на лендинге ФаргатЪ Общие вопросы Javascript 3 09.04.2015 01:54
Не работает jQuery doox911 Библиотеки/Тулкиты/Фреймворки 3 17.01.2014 15:51
Скрипт не работает в FF и опера, но работает в IE(в чем дело???) Cepera Firefox/Mozilla 1 24.08.2012 16:46
jquery не работает в цикле alexus jQuery 3 03.09.2011 14:49
Скрипт меню-гармошки работает выборочно Extern Элементы интерфейса 2 23.02.2009 15:32