avator41,
во втором блоке сделал name="item 2"
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$( ".color-item" ).on("click", function() {
var img = $("img", this),
p = $(".color-text", this),
check = $(":checked",this),
src = check.data("path"),
text = check.data("text");
img.attr("src", src);
img.attr("alt", text);
p.text(text);
});
});
</script>
</head>
<body>
<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="item2" 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="item2" 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>
</body>
</html>
|