Javascript-форум - Показать сообщение отдельно - Работа с data-атрибутами.

Rasy · #2 (**permalink**) 19.06.2016, 16:03

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