Cитуация такая , у каждой кнопки есть свой дата атрибут и там пронумерованы цифры , когда нажимаю на первую кнопку она становиться активно и картинка выходит , все те же атрибуты стоят на каждом товаре и они идентичны , а мне нужно , что бы скрипт срабатывал на каждый товар по отдельности , может какой то цикл сделать или условия поставить , я просто не сильно опытный и не могу разобраться . Сайт на Wordpresse
Код самого товара
<div class="product-phone-iphone-7 active">
<?php
// параметры по умолчанию
$args = array(
'numberposts' => 0,
'category_name' => 'iphone-7',
'order' => 'ASC',
'post_type' => 'products',
'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
);
$posts = get_posts( $args );
foreach($posts as $key => $products){ setup_postdata($products);
$key ++;
?>
<div class="row iphone iphone-7 phone-<?php echo $key; ?>">
<div class="products" data-phone="">
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-12 product-phone-iphone-7-img img">
<?php
$images = get_field('product_photo',$products->ID);
foreach( $images as $key => $image ){
$key ++;
?>
<img src="<?php echo $image['sizes']['medium_large']; ?>" class="photo-6 u-<?php echo $key; ?>" alt="<?php echo $image['alt']; ?>">
<?php
}
?>
</div>
<div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
<div class="product-phone-iphone-7-characteristics characteristics">
<h1><?php the_field('product_name',$products->ID); ?></h1>
<div class="product-color">
<p>Выберите цвет:</p>
<ul>
<?php
$color = get_field('product_color',$products->ID);
foreach( $color as $key => $colors ){
$key ++;
// var_dump($color)
?>
<li class="color-6 v-<?php echo $key; ?>" data-num6="<?php echo $key; ?>"><?php echo $colors['color']; ?></li>
<?php
}
?>
</ul>
</div>
<div class="product-memory">
<p>Выберите объём памяти:</p>
<ul>
<?php
$memory = get_field('memory_phone',$products->ID);
foreach( $memory as $key => $memorys ){
$key ++;
// var_dump($memory)
?>
<li class="memory-6 w-<?php echo $key; ?>" data-memory6="<?php echo $key; ?>"><?php echo $memorys['memory']; ?>GB</li>
<?php
}
?>
</ul>
</div>
<div class="product-price">
<div class="product-btn">
<a href="#contact-form">Оставить заявку</a>
</div>
<div class="price">
<p>Сумма к оплате:
<?php
$price = get_field('price_phone',$products->ID);
foreach( $price as $key => $prices ){
$key ++;
// var_dump($price)
?>
<span class="price-6 x-<?php echo $key; ?>"><?php echo $prices['price']; ?> руб.</span>
<?php
}
?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
wp_reset_postdata(); // сброс
?>
</div>
Сам скрипт
$('.color-6').click(function(event) {
var num = $(this).attr('data-num6');
$('.photo-6').removeClass('active');
$('.color-6').removeClass('active');
$(this).addClass('active');
$('.u-'+num).addClass('active');
});
// Память продукта и цена
$('.memory-6').click(function(event) {
var memory = $(this).attr('data-memory6');
$('.price-6').removeClass('active');
$('.memory-6').removeClass('active');
$(this).addClass('active');
$('.x-'+memory).addClass('active');
});
Простой
