Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выбор только нескольких пунктов (https://javascript.ru/forum/misc/63254-vybor-tolko-neskolkikh-punktov.html)

PonyS 26.05.2016 18:21

Выбор только нескольких пунктов
 
Здравствуйте! Очень нужна ваша помощь, есть код добавления и удаления class у блока, вот он :
<script>
 $(document).ready(function(){
	$('.place').click(function () {
		$(this).toggleClass('select');
		});
	});
</script>


В чем собственно проблема, мне нужно чтобы я мог задать количество возможных смен class, к примеру блоков 10, но я хочу чтобы я мог выбрать только 3 из 10(то бишь сменить class только у 3х, или у 6-и ), подскажите пожалуйста, как добавить ограничение по количеству смены class? Добавить к примеру переменную kol = 5; и она ограничивала смену class до 5и из 10 блоков. Заранее спасибо за помощь!

Decode 26.05.2016 18:52

PonyS, так?

$('.price:lt(3)').click(function() {
    $(this).toggleClass('select');
});

PonyS 26.05.2016 18:59

Поставил код, но он почему-то не меняет class, ничего не происходит...Еще такой вопрос, смогу ли я значение 3 к примеру заменить на другое - кодом ? price:lt(3) к примеру взять значение из input hidden и поставить вместо 3 автоматом, или так с таким решением нельзя?

PonyS 26.05.2016 19:00

А нет, меняет - но только у первых 2х div почему-то, другие нельзя и выбрать могу только 2, нужно чтобы не было привязанности конкретно с первым, а на выбор можно было изменить, но в пределах 2х div , но хоть 3-й, хоть 8-й

Decode 26.05.2016 19:03

PonyS,
<!doctype html>
<html>
<head>
  <meta charset="utf-8" /
  <title></title>
  <style>
    .select {
      background: red;
    }
  </style>
</head>
<body>
  <p class="price">1</p>
  <p class="price">2</p>
  <p class="price">3</p>
  <p class="price">4</p>
  <p class="price">5</p>
  <p class="price">6</p>
  <p class="price">7</p>
  <p class="price">8</p>
  <p class="price">9</p>
  <p class="price">10</p>
  <input type="hidden" value="5" />
  
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var count = $('input[type=hidden]').val();
    
     $('.price:lt(' +count+ ')').click(function() {
       $(this).toggleClass('select');
     });
  </script>
</body>
</html>

PonyS 26.05.2016 19:05

Цитата:

Сообщение от Decode (Сообщение 417709)
PonyS,
<!doctype html>
<html>
<head>
  <meta charset="utf-8" /
  <title></title>
  <style>
    .select {
      background: red;
    }
  </style>
</head>
<body>
  <p class="price">1</p>
  <p class="price">2</p>
  <p class="price">3</p>
  <p class="price">4</p>
  <p class="price">5</p>
  <p class="price">6</p>
  <p class="price">7</p>
  <p class="price">8</p>
  <p class="price">9</p>
  <p class="price">10</p>
  <input type="hidden" value="5" />
  
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var count = $('input[type=hidden]').val();
    
     $('.price:lt(' +count+ ')').click(function() {
       $(this).toggleClass('select');
     });
  </script>
</body>
</html>

То что нужно, спасибо большое, единственный момент, как сделать чтобы не было привязанности к ПЕРВЫМ числам, а на выбор любые? хоть 1 и 4-6, хоть 6-8-9 и т.д, но не подряд 1-2-3-4-5, заранее спасибо!

Dilettante_Pro 26.05.2016 19:08

Decode,
Цитата:

Сообщение от PonyS
То что нужно, спасибо большое, единственный момент, как сделать чтобы не было привязанности к ПЕРВЫМ числам, а на выбор любые? хоть 1 и 4-6, хоть 6-8-9 и т.д, но не подряд 1-2-3-4-5, заранее спасибо!

И чтобы можно было менять набор при работе!

рони 26.05.2016 19:09

PonyS,
вы обьясните как выбирать?

PonyS 26.05.2016 19:12

Цитата:

Сообщение от рони (Сообщение 417713)
PonyS,
вы обьясните как выбирать?

Вот как Decode сделал, но в том его коде можно выбирать 5 подряд начиная с первого, но нельзя изменить рандомно 3-й, 5-й и т.д., а мне нужно чтобы была возможность выбрать без привязки как там (с 1-го и по 5-й)

PonyS 26.05.2016 19:12

Цитата:

Сообщение от Dilettante_Pro (Сообщение 417712)
Decode,

И чтобы можно было менять набор при работе!

Вы о чем?

PonyS 26.05.2016 19:14

Вот как Decode сделал, то можно изменить class у 5-и div, но только с 1-го по 5-й, а если я хочу изменить вот так к примеру: 3, 6, 8, 10, 7 - но так я не могу... То бишь почему-то после 5-го div все остальные неактивные для изменения стали... скорее всего из-за селектора lt, но альтернативы что-то не могу найти

Dilettante_Pro 26.05.2016 19:15

Цитата:

Сообщение от PonyS (Сообщение 417715)
Вы о чем?

да вот об этом
Цитата:

а мне нужно чтобы была возможность выбрать без привязки

PonyS 26.05.2016 19:19

Цитата:

Сообщение от Dilettante_Pro (Сообщение 417718)
да вот об этом

Я просто попросил помощи, если вы об этом т.к. зашел в тупик уже...

Dilettante_Pro 26.05.2016 19:25

PonyS,
Я просто немного забежал вперед в ваших просьбах.
А как вы хотите определять, какие блоки переключать?

Decode 26.05.2016 19:25

PonyS, так?
<!doctype html>
<html>
<head>
  <meta charset="utf-8" /
  <title></title>
  <style>
    .select {
      background: red;
    }
  </style>
</head>
<body>
  <p class="price">1</p>
  <p class="price">2</p>
  <p class="price">3</p>
  <p class="price">4</p>
  <p class="price">5</p>
  <p class="price">6</p>
  <p class="price">7</p>
  <p class="price">8</p>
  <p class="price">9</p>
  <p class="price">10</p>
  <input type="hidden" value="5" />
  
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var count = $('input[type=hidden]').val(), i = 1;

    $('.price').click(function() {
      toggleClass(this);
    });

    function toggleClass(elem) {
      if (i > count && !$(elem).hasClass('select')) return;

      ( $(elem).hasClass('select') ) ? ( $(elem).removeClass('select'), i-- ) : ($(elem).addClass('select'), i++);

    }
  </script>
</body>
</html>

PonyS 26.05.2016 19:30

Цитата:

Сообщение от Decode (Сообщение 417721)
PonyS, так?
<!doctype html>
<html>
<head>
  <meta charset="utf-8" /
  <title></title>
  <style>
    .select {
      background: red;
    }
  </style>
</head>
<body>
  <p class="price">1</p>
  <p class="price">2</p>
  <p class="price">3</p>
  <p class="price">4</p>
  <p class="price">5</p>
  <p class="price">6</p>
  <p class="price">7</p>
  <p class="price">8</p>
  <p class="price">9</p>
  <p class="price">10</p>
  <input type="hidden" value="5" />
  
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var count = $('input[type=hidden]').val(), i = 1;

    $('.price').click(function() {
      toggleClass(this);
    });

    function toggleClass(elem) {
      if (i > count && !$(elem).hasClass('select')) return;

      ( $(elem).hasClass('select') ) ? ( $(elem).removeClass('select'), i-- ) : ($(elem).addClass('select'), i++);

    }
  </script>
</body>
</html>

Да,очень помогли, спасибо большое!

PonyS 26.05.2016 19:55

Подскажите пожалуйста последнее, пробую получить значения что я выбрал из <p class="place"> по клику и занести его в input text, но не получается занести все что выбрал, а только 1-но, последнее что выбрал. То бишь к примеру я изменил class 3-у, 5-у, -6у блоку, и в input text после изменения каждого(по очереди) записывались данные из тега <p>, то бишь вышло бы так : <input type="text" value="3,5,6">, пробую вот так:

<script>
    var count = $('input[type=hidden]').val(), i = 1;

    $('.place').click(function() {
      toggleClass(this);
	 var text = $(this).text();//получаю значение .place
	 $('input[type=text]').val($(this).text() + $(this).text());//заношу в input значение из place
    });

    function toggleClass(elem) {
      if (i > 5 && !$(elem).hasClass('select')) return;

      ( $(elem).hasClass('select') ) ? ( $(elem).removeClass('select'), i-- ) : ($(elem).addClass('select'), i++);

    }
  </script>


В итоге с моим скриптом выходит просто дубль 1-го p что я выбрал, <input type="text" value="88">

рони 26.05.2016 20:05

Decode,
строка 4!!!

рони 26.05.2016 20:05

PonyS,
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .select {
      background: red;
    }
  </style>
</head>
<body>
  <p class="price">1</p>
  <p class="price">2</p>
  <p class="price">3</p>
  <p class="price">4</p>
  <p class="price">5</p>
  <p class="price">6</p>
  <p class="price">7</p>
  <p class="price">8</p>
  <p class="price">9</p>
  <p class="price">10</p>
  <input type="hidden" value="5" />
  <input type="text" value="">
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var count = $('input[type=hidden]').val();
    $('.price').click(function() {
     $(this).toggleClass('select', $('.select').length < count && !$(this).is('.select'));
     var arr = [];
      $('.price').each(function(i,el){
            $(el).is('.select') && arr.push(++i)
            });
      $('input[type=text]').val(arr)
    });

  </script>
</body>
</html>

PonyS 26.05.2016 20:17

Цитата:

Сообщение от рони (Сообщение 417731)
PonyS,
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .select {
      background: red;
    }
  </style>
</head>
<body>
  <p class="price">1</p>
  <p class="price">2</p>
  <p class="price">3</p>
  <p class="price">4</p>
  <p class="price">5</p>
  <p class="price">6</p>
  <p class="price">7</p>
  <p class="price">8</p>
  <p class="price">9</p>
  <p class="price">10</p>
  <input type="hidden" value="5" />
  <input type="text" value="">
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    var count = $('input[type=hidden]').val();
    $('.price').click(function() {
     $(this).toggleClass('select', $('.select').length < count && !$(this).is('.select'));
     var arr = [];
      $('.price').each(function(i,el){
            $(el).is('.select') && arr.push(++i)
            });
      $('input[type=text]').val(arr)
    });

  </script>
</body>
</html>

Спасибо большое, буду дальше изучать js)

PonyS 27.05.2016 14:03

Здравствуйте! Подскажите пожалуйста, как в этой переменной -
var count = $('input[type=hidden]').val();
сделать подсчет с нескольких полей hidden?(чтобы значение суммировалось и уже шло в скрипт) , к примеру в 1 hidden - 5 число, а в 2-м hidden - 2, в итоге в скрипте выводиться 7 и можно изменить class для 7и DIV. Заранее спасибо! Пробую вот так :
var count = $('input[name=adult]').val();
	var count2 = $('input[name=adult2]').val();
	var totalcount = count + count2;

PonyS 27.05.2016 14:20

Даже мой вариант считает, но почему-то конфликтует с выводом значения из div после смены, вот полный код:
<script>
  var count = $('input[name=adult]').val(), count2 = $('input[name=adult2]').val(), totalcount;
 totalcount = count + count2;
    $('.price').click(function() {

     $(this).toggleClass('select', $('.select').length < totalcount && !$(this).is('.select'));
     var arr = [];
      $('.price').each(function(i,el){
            $(el).is('.select') && arr.push(+i)
            });
      $('input[name=mesto]').val(arr)
    });

  </script>


TotalCount переменная почему-то встает на то число которые указано в input mesto, а не суммирует adult и adult2, в чем может быть проблема? Если подключить в код document.write(totalcount); , то выведет не подсчет из adult и adult2, а число которое указано в div price

рони 27.05.2016 14:34

PonyS,
totalcount = +count + +count2;

PonyS 27.05.2016 14:40

Спасибо!!

PonyS 27.05.2016 18:55

Добрый вечер! Я сделал отправку и обновление данных в бд из div после смены class по этому скрипту что тут мне помогли реализовать, но появилась одна проблема: По клику скрипт меняем class у div и отправляет обновленный div в бд, и если нажать еще раз то div сменит еще раз class и отправит в бд повторно, а в чем собственно проблема- мне нужно чтобы если я сменил class у div то в html коде он отобразился как нужно с другим class, но в бд чтобы записался с другим классом(как бы поменять во время загрузки в бд), помогите пожалуйста куда копать с этим, какую функцию использовать?

PonyS 27.05.2016 19:27

Проблему решил, спасибо!

aklis 28.05.2016 19:39

ТС, для кого-то заказ лепишь? Если не секрет конечно.

PonyS 31.05.2016 15:10

Цитата:

Сообщение от aklis (Сообщение 417890)
ТС, для кого-то заказ лепишь? Если не секрет конечно.

Нет, для своего проекта форму выбора.


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