Массив классов элемента
Есть несколько массивов, которые хранят в себе классы элементов
В зависимости от выбраного селекта нужно показать(show) элементы(label) c классами из массива Зашел в тупик получил имя массива, но это уже не массив стал :) (пременная затерлась) а просто строка И как можно показать все label.классИЗмассива <select id="vid-product"> <option selected="selected">Выберите</option> <option value="10"class="10">Первый набор</option> <option value="11"class="11">Второй набор</option> <option value="12"class="12">Третий</option> </select> <div class="label-hide"> <label class="lbl-275"><input value="275" type="checkbox" class="value-275"/>первый</label> <label class="lbl-259"><input value="259" type="checkbox" class="value-259"/>второй</label> <label class="lbl-286"><input value="286" type="checkbox" class="value-286"/>третий</label> </div>
$(document).ready(function(){
//создаем массивы категорий (наборов)
var set10 = ["lbl-275", "lbl-259", "lbl-286"];
var set11 = ["lbl-275", "lbl-259"];
var set12 = ["lbl-259"];
$('.label-hide label').hide();//скрываю элементы
$('#vid-product').on('change', function() {
var numberSet = $('#vid-product').val();
var nameSet = ("set") + numberSet;
Здесь лейблу с классом из нужного массива присвоить show
});
alert ( $.isArray ( nameSet ) ); // выведет на экран true
})(jQuery);
http://jsfiddle.net/LcKbf/2/ там отлаживаю код |
<head>
<script>
window.onload = showresult;
function showresult() {
var sel = document.getElementById("vid-product");
var labels = document.querySelectorAll("div.label-hide label");
var rez = {
set10: ["lbl-275", "lbl-259", "lbl-286"],
set11: ["lbl-275", "lbl-259"],
set12: ["lbl-259"]
}
var hidelabels = function () {
var len = labels.length;
while (len--)
labels[len].style.display = "none";
};
sel.onchange = function () {
hidelabels();
if (this.selectedIndex) {
var arr = rez["set" + this.value];
var rezlabel = document.querySelectorAll('.' + arr.join(', .'));
var len = rezlabel.length;
while (len--)
rezlabel[len].style.display = "block";
}
};
hidelabels();
};
</script>
</head>
<body>
<select id="vid-product">
<option selected="selected">Выберите</option>
<option value="10" class="10">Первый набор</option>
<option value="11" class="11">Второй набор</option>
<option value="12" class="12">Третий</option>
</select>
<div class="label-hide">
<label class="lbl-275">
<input value="275" type="checkbox" class="value-275" />первый</label>
<label class="lbl-259">
<input value="259" type="checkbox" class="value-259" />второй</label>
<label class="lbl-286">
<input value="286" type="checkbox" class="value-286" />третий</label>
</div>
</body>
не досмотрел массивы сразу. |
alexmixaylov,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function () {
var obj = { set10 : ["lbl-275", "lbl-259", "lbl-286"],
set11 : ["lbl-275", "lbl-259"],
set12 : ["lbl-259"]};
$('.label-hide label').hide();
$('#vid-product').on('change', function () {
$('.label-hide label').hide();
var numberSet = $('#vid-product').val();
var nameSet = ("set") + numberSet;
nameSet = '.' + obj[nameSet].join(', .')
$(nameSet, ".label-hide").show();
});
});
</script>
</head>
<body>
<select id="vid-product">
<option selected="selected">Выберите</option>
<option value="10" class="10">Первый набор</option>
<option value="11" class="11">Второй набор</option>
<option value="12" class="12">Третий</option>
</select>
<div class="label-hide">
<label class="lbl-275">
<input value="275" type="checkbox" class="value-275" />первый</label>
<label class="lbl-259">
<input value="259" type="checkbox" class="value-259" />второй</label>
<label class="lbl-286">
<input value="286" type="checkbox" class="value-286" />третий</label>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:34. |