Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавлять число к ID (https://javascript.ru/forum/dom-window/74212-dobavlyat-chislo-k-id.html)

avator41 21.06.2018 18:15
Добавлять число к 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 и т.п
Что-то не получается(((

j0hnik 21.06.2018 18:21
и про циклы почитайте

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

avator41 21.06.2018 18:23
Цитата:
Сообщение от j0hnik (Сообщение 488037)
и про циклы почитайте

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

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

avator41 21.06.2018 18:26
Читал, не получалось(

j0hnik 21.06.2018 18:26
this.id - означает id элемента по которому кликнули.

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

j0hnik 21.06.2018 18:29
скиньте html

avator41 21.06.2018 18:31 
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>




рони 21.06.2018 18:39
avator41,
что хотите сделать?

avator41 21.06.2018 18:41
Цитата:
Сообщение от рони (Сообщение 488044)
avator41,
что хотите сделать?
При нажатии на чёрный/белый меняется картинка и текст внизу

рони 21.06.2018 19:00
avator41,
почему во всех блоках одинаковые name="item1"?

рони 21.06.2018 19:03
avator41,
во втором блоке сделал name="item2"
<!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>

avator41 21.06.2018 19:18
Цитата:
Сообщение от рони (Сообщение 488047)
avator41,
во втором блоке сделал name="item2"
<!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>
Идеально, спасибо)


Часовой пояс GMT +3, время: 06:59.