Добавлять число к ID
 

Есть код:

var ido = "#product-"+i;

$(ido + ' .white').click(function(){
      $(ido + " .color-img img").attr('src', $(ido + ' .radio-white').attr('data-path'));
       $(ido + " .color-text").text( $(ido + ' .radio-white').attr('data-text'));
});

Как сделать, чтобы вместо i подставлялись числа 1,2,3,4 и т.п
Чтобы получался id #product-1, #product-2, #product-3 и т.п
Что-то не получается(((

и про циклы почитайте

https://developer.mozilla.org/ru/doc...терации

Нет, ID разные у элементов, класс white в каждом блоке есть

Читал, не получалось(

this.id - означает id элемента по которому кликнули.

Клик делается по элементу внутри блока с ID

скиньте html

var ido = "#product-"+i;

$(ido + ' .white').click(function(){
      $(ido + " .color-img img").attr('src', $(ido + ' .radio-white').attr('data-path'));
       $(ido + " .color-text").text( $(ido + ' .radio-white').attr('data-text'));
});
$(ido + ' .black').click(function(){
      $(ido + " .color-img img").attr('src', $(ido + ' .radio-black').attr('data-path'));
       $(ido + " .color-text").text( $(ido + ' .radio-black').attr('data-text'));
});

<div class="color-item" id="product-1">
						<div class="color-img" ><img src="img/white.jpg" alt="Белый" ></div>
						<div class="color-input">
							<div class="color-radio">
								<input type="radio" name="item1" value="" data-path="img/white.jpg" data-text="Белый" checked id="color1" class="radio-white">
								<label for="color1" class="white"></label>
							</div>
							<div class="color-radio">
								<input type="radio" name="item1" value="" data-path="img/black.jpg" data-text="Черный" id="color2" class="radio-black">
								<label for="color2" class="black"></label>
							</div>
						</div>
						<p class="color-text">Белый</p>
					</div>
					<div class="color-item" id="product-2">
						<div class="color-img" ><img src="img/white.jpg" alt="Белый" ></div>
						<div class="color-input">
							<div class="color-radio">
								<input type="radio" name="item1" value="" data-path="img/white.jpg" data-text="Белый" checked id="color3" class="radio-white">
								<label for="color3" class="white"></label>
							</div>
							<div class="color-radio">
								<input type="radio" name="item1" value="" data-path="img/black.jpg" data-text="Черный" id="color4" class="radio-black">
								<label for="color4" class="black"></label>
							</div>
						</div>
						<p class="color-text">Белый</p>
					</div>

avator41,
что хотите сделать?

При нажатии на чёрный/белый меняется картинка и текст внизу