Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2016, 12:50
Новичок на форуме
Отправить личное сообщение для pechkin551 Посмотреть профиль Найти все сообщения от pechkin551
 
Регистрация: 19.06.2016
Сообщений: 2

Работа с data-атрибутами.
Здравствуйте все!

Подскажите как выбрать элементы, в моем случае div-ы, по значениям атрибутов data- ?

Например, есть у меня на странице 5 div-ов с разными data-атрибутами и два input-а для ввода желаемых значений:

<input oninput="filter()" onkeyup="filter()" type="text" id="filter-price">
<input oninput="filter()" onkeyup="filter()" type="text" id="filter-space">

<div data-price="1000" data-space="10">DIV 1</div>
<div data-price="1500" data-space="20">DIV 2</div>
<div data-price="2000" data-space="30">DIV 3</div>
<div data-price="3500" data-space="40">DIV 4</div>
<div data-price="5000" data-space="50">DIV 5</div>


Суть: Мне нужны «товары» со стоимостью (data-price) <= 3000 и размером (data-space) >= 20

То есть, при вводе в input-ы значений 3000 и 20, должны остаться DIV 2 и 3.

Вопрос: Как организовать сей процесс?

Пока получается только выводить div-ы «точным попаданием», т.е. ввожу 2000 и 30, получаю DIV 3.

P.S.: Убираю лишнее так:
$('div').css('display', 'none');


Буду признателен!
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2016, 16:03
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 508

<body>

<style>

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

input[type="text"] {
  font-size: 1rem;
  
  display: inline-block;
  
  width: 49.7%;
  height: 35px;
  
  text-indent: 10px;
  
  color: #393939;
  border: 1px solid #cccccc;
  background: aliceblue;
}

.selection {
  margin: 8px 0;
  
  padding: 10px;
  
  border: 1px solid #dadada;
  background-color: azure;
}
</style>

<input type="text" class="filter" id="filter-price" />
<input type="text" class="filter" id="filter-space" />
<div data-price="1000" data-space="10" class="selection">DIV 1</div>
<div data-price="1500" data-space="20" class="selection">DIV 2</div>
<div data-price="2000" data-space="30" class="selection">DIV 3</div>
<div data-price="3500" data-space="40" class="selection">DIV 4</div>
<div data-price="5000" data-space="50" class="selection">DIV 5</div>

<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
$(function () {
  
  $('.filter').on('input', function() {
    
    var filters = validate(this),
        selection = $('.selection');
    
    if (filters) {
      sort(filters, selection);
    }
    
  });
  
  function sort(filters, selection) {
  
    var filterPrice = Number(filters[0]),
        filterSpace = Number(filters[1]),
        sortPriceMax = 3000;
        sortSpaceMin = 20;

    $(selection).each(function(indx, elem) {
      var dataPrice = $(elem).data('price'),
          dataSpace = $(elem).data('space'),
          isPriceMore = isPrice(dataPrice),
          isSpaceLess = isSpace(dataSpace);


      if (isPriceMore === true && isSpaceLess === false) {
        $(elem).show().css('background', 'coral');
      } else {
        $(elem).hide();
      }

      function isPrice(price) {
        if (price < filterPrice && price < sortPriceMax) {
          return true;
        }
        return false;
      }
      
      function isSpace(space) {
        if (space <= filterSpace && space < sortSpaceMin) {
          return true;
        }
        return false;
      }
    });

  }
  
  function validate(elem) {
    var symbol = $(elem).val(),
        filters = [];

    $('.filter').each(function(indx, elem) {
      filters[indx] = isFinite($(elem).val()) ? $(elem).val() : '';
    });
  
    if (isNaN(symbol) || symbol.length < 2 || filters.indexOf('') >= 0) {
      return false;
    }
    
    return filters;
  }
});
</script>

Последний раз редактировалось Rasy, 19.06.2016 в 18:54.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2016, 17:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

Rasy,
меньше нуля price и больше 2000 space и есть результат , это как?
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2016, 18:55
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 508

рони,
Вроде подправил, все-таки не правильную логику построил, по ходу дел.
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2016, 19:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

Rasy,
алгоритм 'input' div.hude().filter().show() всё
Ответить с цитированием
  #6 (permalink)  
Старый 19.06.2016, 19:40
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 508

рони,
где код маэстро?)
Ответить с цитированием
  #7 (permalink)  
Старый 19.06.2016, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

Rasy,
строка 71 лишняя, сделана только для вывода сообщения
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  </head>

<body>

<style>

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

input[type="text"] {
  font-size: 1rem;

  float: left;

  width: 45%;
  height: 35px;

  text-indent: 10px;

  color: #393939;
  border: 1px solid #cccccc;
  background: aliceblue;
}

.selection {
  margin: 8px 0;

  padding: 10px;

  border: 1px solid #dadada;
  background-color: azure;
}
.mes.ok{
    color: rgb(0, 0, 205);
}
.mes{
  color: rgb(255, 0, 0);
}

</style>

<input type="text" class="filter" id="filter-price" />
<input type="text" class="filter" id="filter-space" /><br>
<p class="mes ok">All</p>
<div data-price="1000" data-space="10" class="selection">DIV 1</div>
<div data-price="1500" data-space="20" class="selection">DIV 2</div>
<div data-price="2000" data-space="30" class="selection">DIV 3</div>
<div data-price="3500" data-space="40" class="selection">DIV 4</div>
<div data-price="5000" data-space="50" class="selection">DIV 5</div>

<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
$(function() {
    var c = $(".filter"),
        a = $(".selection"),
        d = $(".mes");
    c.on("input", function() {
        var b = +c[0].value || 0,
            e = +c[1].value || 0,
            b = a.filter(function(c, a) {
                return +$(a).data("price") <= b && +$(a).data("space") >= e
            });
        b.length ? (a.hide(), b.show(), d.text(b.length + " kol"),d.addClass("ok")) : (a.show(), d.text("no"),d.removeClass("ok"));
        ;
    })
});
</script>



</body>
</html>

Последний раз редактировалось рони, 19.06.2016 в 20:12.
Ответить с цитированием
  #8 (permalink)  
Старый 19.06.2016, 20:32
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 508

рони,
Вы так везде переменные именуете, или только на форуме?
Ответить с цитированием
  #9 (permalink)  
Старый 19.06.2016, 20:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

Сообщение от Rasy
Вы так везде переменные именуете, или только на форуме?
у меня список для переменных очень короткий.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  </head>

<body>

<style>

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

input[type="text"] {
  font-size: 1rem;

  width: 48%;
  height: 35px;

  text-indent: 10px;

  color: #393939;
  border: 1px solid #cccccc;
  background: aliceblue;
}

.selection {
  margin: 8px 0;

  padding: 10px;

  border: 1px solid #dadada;
  background-color: azure;
}
</style>

<input type="text" class="filter" id="filter-price" />
<input type="text" class="filter" id="filter-space" />

<div data-price="1000" data-space="10" class="selection">DIV 1</div>
<div data-price="1500" data-space="20" class="selection">DIV 2</div>
<div data-price="2000" data-space="30" class="selection">DIV 3</div>
<div data-price="3500" data-space="40" class="selection">DIV 4</div>
<div data-price="5000" data-space="50" class="selection">DIV 5</div>

<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
$(function() {
    var input = $(".filter"),
        div = $(".selection");
    input.on("input", function() {
        var price = +input[0].value || 0,
            space = +input[1].value || 0;
            div.hide().filter(function(c, elem) {
                return (!price||+$(elem).data("price") <= price) && (!space||+$(elem).data("space") >= space )
            }).show();
    })
});
</script>



</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 19.06.2016, 21:04
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 508

Сообщение от рони
у меня список для переменных очень короткий.
Представляю код в таком стиле на нативном js, сплошной мозговой штурм
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прошу раскритиковать наслойку работы с MySql. Alasdair Node.JS 4 21.11.2015 19:06
работа с атрибутами yintar jQuery 11 22.07.2015 23:33
Упростить код Nifler Общие вопросы Javascript 4 12.06.2015 17:29
вопрос по видимости переменных. yiooxir Angular.js 3 31.10.2013 10:37
Json ответ, работа с data SergeyMiracle AJAX и COMET 7 03.07.2013 18:29