Обращение к 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 но опять же, как это сделать - не понятно. возможно можете подсказать если не сложно. |
Есть селекторы атрибутов. Вместо
.some-class- [data-some-data="some-value"](и несколько более общих вариатов.) |
[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)`)
|
спасибо) а можно как то это реализовать без якоря с ид продукта и модуля? т.е. по типу:
data: $('this' input[type=\'text\'], 'this' input[type=\'hidden\'], 'this' input[type=\'radio\']:checked, 'this' input[type=\'checkbox\']:checked, 'this' select, 'this' textarea'), |
хотя нужно еще один класс одинаковый для всех, чтобы было понятно что клик именно по товарному блоку.
Тогда как то так:
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> |
| Часовой пояс GMT +3, время: 19:05. |