Facebook

Re: Untitled safest cryptocurrency exchange

From Crippled Coyote, 2 Years ago, written in HTML5.
This paste is a reply to Untitled from Tinct Coyote - view diff
URL https://pastebin.pl/view/fc30ddfe
Embed
Download Paste or View Raw
Hits: 368
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  4. var searchBox = '.search-box';
  5. var searchItem = '.search-box input';
  6. var listItem = '.cat_image';
  7. var hideClass = 'is-hide';
  8.  
  9. $(function() {
  10.     $(searchItem).on('change', function() {
  11.         search_filter();
  12.     });
  13. });
  14.  
  15. function search_filter() {
  16.     $(listItem).removeClass(hideClass);
  17.     for (var i = 0; i < $(searchBox).length; i++) {
  18.        var name = $(searchBox).eq(i).find('input').attr('name');
  19.        var searchData = selected_items(name);
  20.        if(searchData.length === 0 || searchData[0] === '') {
  21.            continue;
  22.        }
  23.        for (var j = 0; j < $(listItem).length; j++) {
  24.            var itemData = $(listItem).eq(j).data(name);
  25.            if(searchData.indexOf(itemData) === -1) {
  26.                $(listItem).eq(j).addClass(hideClass);
  27.            }
  28.        }
  29.    }
  30. }
  31.  
  32. function selected_items(name) {
  33.    var searchData = [];
  34.    $('input[name=' + name + ']:checked').each(function() {
  35.        searchData.push($(this).val());
  36.    });
  37.    return searchData;
  38. }
  40.  
  42. .search-box_title{
  43.     font-weight: bold;
  44. }
  45. .search-box label {
  46.     cursor: pointer;
  47.     display: inline-block;
  48.     margin-right: 10px;
  49.     line-height: 16px;
  50. }
  51. .search-box input[type="radio"] {
  52.     width: 16px;
  53.     height: 16px;
  54.     margin: -2px 5px 0 0;
  55.     padding: 0;
  56.     box-sizing: border-box;
  57.     vertical-align: middle;
  58. }
  59. .search-box input[type="checkbox"] {
  60.     width: 16px;
  61.     height: 16px;
  62.     margin: -2px 5px 0 0;
  63.     padding: 0;
  64.     box-sizing: border-box;
  65.     vertical-align: middle;
  66. }
  67. .cat_image_all {
  68.     display: flex;
  69.     flex-wrap: wrap;
  70.     justify-content: space-between;
  71.     max-width: 680px;
  72.     margin: 3em auto 0;
  73. }
  74. .cat_image {
  75.     width: 48%;
  76.     max-width: 320px;
  77.     margin: 0 0 2em;
  78. }
  79. .cat_image.is-hide {
  80.     display: none;
  81. }
  82. .cat_image a {
  83.     display: block;
  84.     color: #444;
  85. }
  86. .cat_image a:hover {
  87.     text-decoration: underline;
  88. }
  90. </head>
  91. <body onload="search_filter()">
  92. <div class="search-box">
  93.     <span class="search-box_title">果物</span>
  94.     <label><input type="checkbox" name="fruits" value="apple">りんご</label>
  95.     <label><input type="checkbox" name="fruits" value="apple">バナナ</label>
  96.     <label><input type="checkbox" name="fruits" value="apple">マンゴー</label>
  97.     <label><input type="checkbox" name="fruits" value="orange">オレンジ</label>
  98.     <label><input type="checkbox" name="fruits" value="lemon">レモン</label>
  99. </div>
  100. <div class="cat_image_all">
  101.     <div class="cat_image" data-fruits="apple">
  102.         <p>スムージー</p>
  103.     </div>
  104. </div>
  105. </body>

Replies to Re: Untitled rss

Title Name Language When
Re: Re: Untitled Violet Water Vole html5 1 Year ago.
Re: Re: Untitled Gentle Bird html5 2 Years ago.

Reply to "Re: Untitled"