Форум

exid · #1 (**permalink**) 23.01.2017, 21:04

Выдаёт ошибку на 9й строке (Expected '{' and instead saw '$'. Пишет Don't make functions within a loop. и в 10 строке: Missing "use strict" statement.)

/* Массив с данными */
var data = [
    {class: 'v1', img: '1.png', material: 'Белый'},
    {class: 'v2', img: '2.png', material: 'Жёлтый'},
    {class: 'v3', img: '3.png', material: 'Красный'},
    // и т.д.
];
/* Цикл, формирующий обработчики клика на основании массива данных */
for (var i = 0; i < data.length; i++)
    $("."+data[i].class).click(function () {
        $("div.box").html('<img src="img/zal/color-big/1/'+data[i].img+'">');
        $("div.material").html(data[i].material);
			  $(".view").show();
        $(".view").html('<a href="img/zal/texturi/1/'+data[i].img+'" class="fancybox" rel="textura"><span class="icon-view"></span></a>');
    });

Изначально был такой Код:

/* Текстуры и Атрибуты ссылок */
	var v1la = "img/zal/color-big/1/";
	var v1l = "img/zal/texturi/1/";
	var v1atr = "class='fancybox' rel='textura'><span class='icon-view'></span>";
	/* Материалы 1го Варианта */
	$(".v1").click(function () {
		$("div.box").html('<img src="'+v1la+'1.png">');
		$("div.material").html("Материал 1");
		$(".view").show();
		$(".view").html('<a href="'+v1l+'1.png" '+v1atr+'</a>');
	});
	$(".v2").click(function () {
		$("div.box").html("<img src='img/zal/color-big/1/2.png'>");
		$("div.material").html("Материал 2");
		$(".view").show();
		$(".view").html('<a href="'+v1l+'2.png" '+v1atr+'</a>');
	});
	$(".v3").click(function () {
		$("div.box").html("<img src='img/zal/color-big/1/3.png'>");
		$("div.material").html("Материал 3");
		$(".view").show();
		$(".view").html('<a href="'+v1l+'3.png" '+v1atr+'</a>');
	});

laimas · #2 (**permalink**) 23.01.2017, 21:38

И зачем вообще этот цикл?

<html>
<body>
<div id="v">
    <span class="v">Btn</span>
    <span class="v">Btn</span>
    <span class="v">Btn</span>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var data = [
    {class: 'v1', img: '1.png', material: 'Белый'},
    {class: 'v2', img: '2.png', material: 'Жёлтый'},
    {class: 'v3', img: '3.png', material: 'Красный'},
    // и т.д.
];

$(function() {
    $('#v').on('click', 'span', function() {
        var i = $(this).index();
        alert(data[i].img)
    })
});
</script>
</body>
</html>

exid · #3 (**permalink**) 23.01.2017, 23:08

А при чём здесь Alertы?

рони · #4 (**permalink**) 23.01.2017, 23:16

exid,
вам показали как убрать цикл, а вместо алерт вам нужно добавить строки 11-14 из первого кода

exid · #5 (**permalink**) 23.01.2017, 23:33

А вы не могли бы на моём примере сделать?
Я просто в Яве не силён пока.
Сейчас напортачу и буду задавать ещё кучу вопросов

рони · #6 (**permalink**) 23.01.2017, 23:51

exid,
не могу, пример вам показан как образец, только вам достуна информация как должно быть на самом деле.
запомните пример на будущее.
возможно в вашем цикле не хватает скобок {}

for (var i = 0; i < data.length; i++) {
//код
}

laimas · #7 (**permalink**) 23.01.2017, 23:53

exid,
если обработку щелчка по элементам делегировать родителю, то в обработчике можно получить индекс этого элемента, по которому уже получить необходимое из объекта. HTML код нужно показывать, а иначе не понять с чем вы там экспериментируете.

Форум

Справочник

Discord чат

Курсы javascript