Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.09.2023, 00:29
Кандидат Javascript-наук
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 133

Обращение к div не чер класс, а через data-
Здравствуйте. есть такой скрипт:

'add_lan': function(product_id, prefix) {
		$.ajax({
			url: 'index.php?route=checkout/cart/add',
			type: 'post',
			data: $('.mini_add'+product_id+''+prefix+' input[type=\'text\'], .mini_add'+product_id+''+prefix+' input[type=\'hidden\'], .mini_add'+product_id+''+prefix+' input[type=\'radio\']:checked, .mini_add'+product_id+''+prefix+' input[type=\'checkbox\']:checked, .mini_add'+product_id+''+prefix+' select, .mini_add'+product_id+''+prefix+' textarea'),
			dataType: 'json',
			beforeSend: function() {
				$('#cart > button').button('loading');
			},
			complete: function() {
				$('#cart > button').button('reset');
			},
			success: function(json) {
				$('.alert-dismissible, .text-danger').remove();

				if (json['redirect']) {
					location = json['redirect'];
				}

				if (json['success']) {
					$('#cart > button').html('<img src="catalog/view/theme/manhattan/img/i9.svg" alt="">' + json['total'] + '');
					$('#cart > ul').load('index.php?route=common/cart/info ul li');
				}
			},
			error: function(xhr, ajaxOptions, thrownError) {
				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}
		});
	},


и такой код:
{% if products %}
<div id="lprod{{ sid }}" class="owl-carousel owl-theme lprod_box" {% if not lana %}style="display:none"{% endif %}>
    {% for product in products %}
    <div class="lprod_item row product-thumb mini_add{{ product.product_id }}sid{{ sid }}">
        <div class="col-sm-5">
            <div class="image">
               <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" /></a>
            </div>
        </div>
        <div class="col-sm-7">
        <div class="full-tov">
            <div class="caption">
                <div class="mm44">
                    <h3 class="mm44a">{{ product.meta_h1 }}</h3>
                    <span class="mm44b">
                        <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><img src="/image/catalog/site_img/heart.svg"></button>
                        <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><img src="/image/catalog/site_img/line.svg"></button>
                    </span>
                </div>
                <div class="new10 list-unstyled">
                    {% if product.quantity > 0 %}
                        <span class="new11">{{ tn_yes }}</span>
                        <div class="new13">{{ text_model }} <span>{{ product.model }}</span></div>
                    {% else %}
                        <span class="new12">{{ tn_no }}</span>
                        <div class="new13">{{ text_model }} <span>{{ product.model }}</span></div>
                    {% endif %}
                </div>
            </div>
            <div class="knm17"></div>
            <div class="option_lan">
                {% if product.options %}
                  {% for option in product.options %}
                      {% if option.type == 'select' %}
                      <div class="form-group{% if option.required %} required{% endif %} cat_option">
                        <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control ani">
                          {% for option_value in option.product_option_value %}
                          <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                          {% if option_value.price %}
                          ({{ option_value.price_prefix }}{{ option_value.price }})
                          {% endif %} </option>
                          {% endfor %}
                        </select>
                      </div>
                      {% endif %}
                      {% if option.type == 'radio' %}
                         <div class="form-group{% if option.required %} required {% endif %} cat_option">
                            <label class="control-label">{{ option.name }} </label>
                            <div id="input-option{{ option.product_option_id }}">
                               <div  data-toggle="buttons"  class="radio">
                                  {% for option_value in option.product_option_value %}
                                  <label class="btn btn-grey op11" {% if option.option_id == 19 or option.option_id == 20 %}data-toggle="tooltip" data-original-title="{% if option_value.price %}{{ option_value.price_prefix }}{{ option_value.price }}{% else %}{{ tfree }}{% endif %}"{% endif %}>
                                     <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
                                     <span class="new40">{{ option_value.name }}</span>
                                  </label>
                                  {% endfor %}
                               </div>
                            </div>
                         </div>
                      {% endif %}

                  {% endfor %}
                {% endif %}
            </div>
            <div class="new50">
                <div class="new55">
                    <div class="input-group spinner number-spinner new56">
                        <button class="btn" data-dir="dwn">-</button>
                        <input type="hidden" name="product_id" value="{{ product.product_id }}">
                        <input type="text" name="quantity" value="{{ product.minimum }}" class="form-control quantity">
                        <button class="btn" data-dir="up">+</button>
                    </div>
                </div>

                {% if product.price %}
                <div class="list-unstyled price new57">
                  {% if not product.special %}
                    <div class="price-new">{{ product.price }}</div>
                  {% else %}
                    <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span>
                  {% endif %}
                </div>
                {% endif %}
            </div>
            <div class="new51 but_box">
                <button type="button" class="add_lan btn btn-info btn-lg btn-block new59 ani" data-loading-text="{{ text_loading }}" onclick="cart.add_lan('{{ product.product_id }}', 'sid{{ sid }}');">{{ button_cart2 }}</button>
                <div id="but_credit"></div>
            </div>
        </div>
        </div>
    </div>
    {% endfor %} 
</div>
<script>
$(document).ready(function() {
    $('#lprod{{ sid }}').owlCarousel({
        loop:false,
        items:1,
        dots:false,
        margin:0,
        nav:false,
        navText: ['<div class="swiper-button-prev"></div>', '<div class="swiper-button-next"></div>'],
        autoplay:false,
        smartSpeed:2000,
        autoplayTimeout:5000,
        autoplayHoverPause:true,
        responsive:{
            160:{
                items:1,
                loop:false,
                margin:0
            },
            320:{
                items:1,
                loop:false,
                margin:0
            },
            640:{
                items:1,
                loop:false
            },
            768:{
                items:1,
                loop:false
            },
            1024:{
                items:1
            }
        }
    });
});
</script>
{% endif %}


Все работает как надо. Но при клике по кнопке купить идет обращение к самому блоку через класс. А как сделать через data-koteyka? https://prnt.sc/R4w_4nDm-E4y

Нужно где то здесь поправить https://prnt.sc/Z1DcvOHFu7Cg но как...

я хочу изменить с класса на data, потому что в процессе взаимодействия с блоком я буду менять само значение data. а класс так не поменяешь, там еще есть классы.

______________________________
есть еще идейка, отказаться от класов и data и просто использовать this но опять же, как это сделать - не понятно. возможно можете подсказать если не сложно.
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2023, 04:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,469

Есть селекторы атрибутов. Вместо
.some-class
-
[data-some-data="some-value"]
(и несколько более общих вариатов.)
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2023, 09:11
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,681

[data-kteyka="add767sid77"]
Если не думать про IE, то весь этот кошмар
data: $('.mini_add'+product_id+''+prefix+' input[type=\'text\'], .mini_add'+product_id+''+prefix+' input[type=\'hidden\'], .mini_add'+product_id+''+prefix+' input[type=\'radio\']:checked, .mini_add'+product_id+''+prefix+' input[type=\'checkbox\']:checked, .mini_add'+product_id+''+prefix+' select, .mini_add'+product_id+''+prefix+' textarea'),

можно записать
data: $(`[data-koteyka="mini_add${product_id}${prefix}"] :where(input[type="text"],input[type="hidden"],input[type="radio"]:checked,input[type="checkbox"]:checked,select,textarea)`)
Ответить с цитированием
  #4 (permalink)  
Старый 28.09.2023, 16:18
Кандидат Javascript-наук
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 133

спасибо) а можно как то это реализовать без якоря с ид продукта и модуля? т.е. по типу:

data: $('this' input[type=\'text\'], 'this' input[type=\'hidden\'], 'this' input[type=\'radio\']:checked, 'this' input[type=\'checkbox\']:checked, 'this' select, 'this' textarea'),
Ответить с цитированием
  #5 (permalink)  
Старый 28.09.2023, 16:20
Кандидат Javascript-наук
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 133

хотя нужно еще один класс одинаковый для всех, чтобы было понятно что клик именно по товарному блоку.

Тогда как то так:

data: $('.tovar 'this' input[type=\'text\'], .tovar 'this' input[type=\'hidden\'], .tovar 'this' input[type=\'radio\']:checked, .tovar 'this' input[type=\'checkbox\']:checked, .tovar 'this' select, .tovar 'this' textarea'),


т.е. как заставить обращаться к объектам внутри блока .tovar но чтобы система понимала, что обращение именно к этому блоку по которому был сделан клик, потому что таких блоков будет много

например:

<div class="tovar">
	<h2>Tovar 1</h2>
	<input type="text" value="">
	<input type="hidden">
</div>

<div class="tovar">
	<h2>Tovar 2</h2>
	<input type="text" value="">
	<input type="hidden">
</div>

<div class="tovar">
	<h2>Tovar 3</h2>
	<input type="text" value="">
	<input type="hidden">
</div>

<div class="tovar">
	<h2>Tovar 4</h2>
	<input type="text" value="">
	<input type="hidden">
</div>

Последний раз редактировалось StartGames, 28.09.2023 в 16:35.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Если input заполнен присвоить класс родителю div dasha862 jQuery 22 06.09.2017 15:30
Присвоить input name такой же как класс у div alex-tiesto jQuery 2 05.03.2017 01:01
Не могу обратиться к элементам div, после того как они получены через $.ajax igsavenko jQuery 1 31.05.2010 17:53
Не получается загрузить баннер в раздел DIV методами Javascript через iframe ((( autobuh Общие вопросы Javascript 3 24.07.2009 19:24
Подгрузка элемента из div через Appendto Vitaly jQuery 5 24.06.2009 10:54