Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2014, 23:08
Аспирант
Отправить личное сообщение для alexmixaylov Посмотреть профиль Найти все сообщения от alexmixaylov
 
Регистрация: 14.09.2013
Сообщений: 70

Массив классов элемента
Есть несколько массивов, которые хранят в себе классы элементов

В зависимости от выбраного селекта нужно показать(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/ там отлаживаю код

Последний раз редактировалось alexmixaylov, 23.04.2014 в 23:23.
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2014, 00:48
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<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>

не досмотрел массивы сразу.

Последний раз редактировалось Vlasenko Fedor, 24.04.2014 в 02:27.
Ответить с цитированием
  #3 (permalink)  
Старый 24.04.2014, 00:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
как обратиться к items элемента из другого элемента и изменить его? Krepkii ExtJS 2 12.02.2013 14:53
Массив из картинок. Не могу изменить свойство элемента массива Володя Шишкин Ваши сайты и скрипты 7 17.02.2012 11:21
Как создать многомерный массив FRIE Общие вопросы Javascript 29 02.06.2010 19:14
Подскажите, как вернуть js-скрипт массив Polkan AJAX и COMET 18 30.04.2010 23:30