Javascript.RU

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

Как добавить класс css активной радиокнопке?
Здравствуйте!
Нужно выделять фон выбранного радиокнопкой способа доставки в woocommerce... Для этого хочу добавить элементу списка с активной радиокнопкой дополнительный класс css... В js совсем не силен, поэтому мучаюсь уже второй день..
Пробовал добавлять на страницу код
<script>
$('#shipping_method').click(function() {
    if (this.checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }
});
</script>

но что-то не получается ничего...
Помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2016, 14:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Igorsrt,
сделайте полностью пример
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2016, 15:10
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от рони Посмотреть сообщение
Igorsrt,
сделайте полностью пример
сайт на wordpress + woocommerce
Код html в фаербаге примерно такой получается:
<li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate">Доставка1</label><div style="float:right;">300 руб.</div></li>
<li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_delivery" value="local_delivery" class="shipping_method"><label for="shipping_method_0_local_delivery">Доставка2</label><div style="float:right;">500 руб.</a></div></li>

возможно, я скрипт куда-то не туда вставляю... но пробовал уже по всякому и в разные места... ((
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2016, 16:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Igorsrt,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .selected {
         width: 50px;
     }

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

  <script>
   $(function(){
       $('input.shipping_method').click(function() {
    $('input.shipping_method').each(function(indx, element){
         if (this.checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }  });


}).filter(":checked").click();

   })
  </script>
</head>

<body>
<ul>
  <li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate">Доставка1</label><div style="float:right;">300 руб.</div></li>
<li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_delivery" value="local_delivery" class="shipping_method"><label for="shipping_method_0_local_delivery">Доставка2</label><div style="float:right;">500 руб.</div></li>

</ul>
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2016, 16:26
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Спасибо!
но почему-то тоже не работает у меня... что же я делаю не так...
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2016, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Igorsrt,
нет кода нет совета
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2016, 17:32
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Сообщение от рони Посмотреть сообщение
Igorsrt,
нет кода нет совета
Я вот так вставлял Ваш код скрипта в файл form-checkout.php (в самый конец):
<?php
/**
 * Checkout Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you (the theme developer).
 * will need to copy the new files to your theme to maintain compatibility. We try to do this.
 * as little as possible, but it does happen. When this occurs the version of the template file will.
 * be bumped and the readme will list any important changes.
 *
 * @see 	    http://docs.woothemes.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

wc_print_notices();

do_action( 'woocommerce_before_checkout_form', $checkout );

// If checkout registration is disabled and not logged in, the user cannot checkout
if ( ! $checkout->enable_signup && ! $checkout->enable_guest_checkout && ! is_user_logged_in() ) {
	echo apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) );
	return;
}

?>
					
<h3>Способ доставки</h3>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

	<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

	<div id="order_review" class="woocommerce-checkout-review-order">
		<?php do_action( 'woocommerce_checkout_order_review' ); ?>
	</div>

	<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>


	<?php if ( sizeof( $checkout->checkout_fields ) > 0 ) : ?>

		<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

		<div class="" id="customer_details">
			<?php do_action( 'woocommerce_checkout_billing' ); ?>

			<?php do_action( 'woocommerce_checkout_shipping' ); ?>
		</div>

		<div class="form-row place-order">
			<noscript>
				<?php _e( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the <em>Update Totals</em> button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ); ?>
				<br/><input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="<?php esc_attr_e( 'Update totals', 'woocommerce' ); ?>" />
			</noscript>

			<?php wc_get_template( 'checkout/terms.php' ); ?>

			<?php do_action( 'woocommerce_review_order_before_submit' ); ?>

			<?php echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="woo-order-button" name="woocommerce_checkout_place_order" id="place_order" value="Отправить" data-value="Отправить" />' ); ?>

			<?php do_action( 'woocommerce_review_order_after_submit' ); ?>

			<?php wp_nonce_field( 'woocommerce-process_checkout' ); ?>
		</div>

		<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

	<?php endif; ?>

</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
       $('input.shipping_method').click(function() {
    $('input.shipping_method').each(function(indx, element){
         if (this.checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }  });
}).filter(":checked").click();
   })
  </script>
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2016, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Igorsrt,
ок но не могу помочь, php не знаю
Ответить с цитированием
  #9 (permalink)  
Старый 21.02.2016, 17:53
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

насколько я понимаю, с помощью php в конечном счете формируется обычная html страница с кодом, фрагмент которого приводил в начале...
Мне было интересно, может быть я сам скрипт как-то неправильно вставляю..
В любом случае, спасибо за попытку помочь.
Ответить с цитированием
  #10 (permalink)  
Старый 21.02.2016, 18:08
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Igorsrt,
попробуйте весь код с JS поместить в echo
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как найти нужный элемент страницы и кликнуть если он имеет тока класс... Александр_1997 Events/DOM/Window 3 18.01.2014 14:34
Как запретить применение css при изменении окна браузера east (X)HTML/CSS 7 12.10.2012 21:23
как сделать ссылку у активной img IggyTot Элементы интерфейса 36 10.08.2012 13:05
Как указать из какого css брать стиль? debugx (X)HTML/CSS 1 04.10.2011 10:08