Facebook

Untitled safest cryptocurrency exchange

From Tinct Coyote, 2 Years ago, written in HTML5.
URL https://pastebin.pl/view/c0f630ed
Embed
Download Paste or View Raw
Hits: 189
  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>
  106.  

Replies to Untitled rss

Title Name Language When
Re: Untitled Crippled Coyote html5 2 Years ago.

Reply to "Untitled"