Форум

StartGames · #1 (**permalink**) 09.12.2019, 08:49

Здравствуйте)
Помогите решить возможно банальную проблему.

Есть код который добавляет класс одному иду и убирает этот же клас у другого ида:

<script type="text/javascript">
$('#ku.ku.ku').click(function() {
    $(ku.ku.ku).addClass('active');
    $(be.be.be).removeClass('active');
  });
</script>

Но этот код не работает если мы обращаемся к ид в котором содержатся точки "ku.ku.ku". если сделать без точек "kukuku" тогда срабатывает. Подскажите, как сделать так чтобы код работал по ид с точками? Заранее очень благодарен.

laimas · #2 (**permalink**) 09.12.2019, 09:03

Экранировать $('#ku\\.ku\\.ku'), но не надо определять такие id, сами же когда либо запутаетесь, или с багами столкнетесь.

рони · #3 (**permalink**) 09.12.2019, 09:17

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

Экранировать

пойду проверять

рони · #4 (**permalink**) 09.12.2019, 09:24

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

Экранировать $('#ku\\.ku\\.ku')

работает, ещё можно так

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active{
      background-color: #FF0000;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('[id="ku.ku.ku"]').click(function() {
    $(this).addClass('active');
    $('[id="be.be.be"]').removeClass('active');
  });
});
  </script>
</head>

<body>
<div id="ku.ku.ku">ku.ku.ku</div>
<div id="be.be.be" class="active">be.be.be</div>
</body>
</html>

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

но не надо определять такие id, сами же когда либо запутаетесь, или с багами столкнетесь.

laimas · #5 (**permalink**) 09.12.2019, 09:51

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

ещё можно так

Да, с точками пойдет, но легко допустить ошибку если в имени будут квадратные скобки.

StartGames · #6 (**permalink**) 09.12.2019, 17:57

Спасибо большое)) Реально работает)
Но из-за того что модуль кодил какой то чертов гений на своей волне, скрипт срабатывает только раз http://prntscr.com/q8cyat
Повторный клик ни к чему не приводит.

Вот это головоломка, как только я подбираюсь к решению проблемы, тут же она перерастает во что то другое. такое ощущение что сайт отказывается правильно работать не смотря на логику. Никак не могу прикрутить иду класс актив((

Чтобы попасть на эту страницу:
1) Добавляем любой товар в корзину http://i502752a.beget.tech/supy
2) Заходим сюда http://i502752a.beget.tech/checkout

Вот там и есть этот злорадный код который работает против всех законов. На этот мелкий нюанс потратил больше дня...

StartGames · #7 (**permalink**) 09.12.2019, 18:09

Или как добавить стиль элементу, если сам элемент родительский, а стиль нужно добавить если дочерный элемент отмечен :checked

<div id="su.free.free">
      <label for="free.free">
            <input type="radio" name="shipping_method" value="free.free" id="free.free" checked="checked" data-refresh="5" class="styled"> 
            <span class="text">Бесплатная доставка</span>
            <span class="price">0 руб</span>
      </label>
</div>

Нужно чтобы срабатывал стиль для ид su.free.free только в том случае, если input внутри отмечен checked="checked".

Вот скриншот: http://prntscr.com/q8d8th

Подскажите решение?)))

StartGames · #8 (**permalink**) 09.12.2019, 18:47

Вот что то на подобии CSS
#shipping_method_list input:checked ~ * .radio-input {color:red !important}

Т.е. если дочерный input отмечен checked тогда родительский элемент с класом .radio-input {color:red !important}

<div id="shipping_method_list">
					

						
							
								 
									<strong class="title nn">Доставка</strong>
								

								
									
									  <div class="radio-input radio active" id="su.flat.flat">
									    <label for="flat.flat">
									    
									      <input type="radio" name="shipping_method" value="flat.flat" id="flat.flat" checked="checked" data-refresh="5" class="styled"> 
									    
									    <span class="text">Доставка</span><span class="price">80 руб</span></label>
									  </div>
									
								
							
								 
									<strong class="title nn">Самовывоз</strong>
								

								
									
									  <div class="radio-input radio" id="su.pickup.pickup">
									    <label for="pickup.pickup">
									    
									      <input type="radio" name="shipping_method" value="pickup.pickup" id="pickup.pickup" data-refresh="5" class="styled"> 
									    
									    <span class="text">Самовывоз</span><span class="price">0 руб</span></label>
									  </div>
									
								
							
						
					
				</div>

рони · #9 (**permalink**) 09.12.2019, 19:06

StartGames,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .radio-input.active {color:red !important}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
$(function() {
$('#shipping_method_list').on('change','[name="shipping_method"]', function() {
        $(this).parents('div.radio-input').addClass('active').siblings('div.radio-input').removeClass('active');
    });
});
    </script>
</head>
<body>
<div id="shipping_method_list">
                                    <strong class="title nn">Доставка</strong>
                                      <div class="radio-input radio active" id="su.flat.flat">
                                        <label for="flat.flat">
                                          <input  type="radio" name="shipping_method" value="flat.flat" id="flat.flat" checked="checked" data-refresh="5" class="styled">
                                        <span class="text">Доставка</span><span class="price">80 руб</span></label>
                                      </div>
                                    <strong class="title nn">Самовывоз</strong>
                                      <div class="radio-input radio" id="su.pickup.pickup">
                                        <label for="pickup.pickup">
                                          <input type="radio" name="shipping_method" value="pickup.pickup" id="pickup.pickup" data-refresh="5" class="styled">
                                        <span class="text">Самовывоз</span><span class="price">0 руб</span></label>
                                      </div>
                </div>
</body>
</html>

StartGames · #10 (**permalink**) 09.12.2019, 19:32

рони, куда еще один лайк поставить?)) Спасибо большое, выручили))

Форум

Справочник

Discord чат

Курсы javascript