Isotope combine 6 select dropdown

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
DionisisZougras
Δημοσιεύσεις: 2
Εγγραφή: 16 Μάιος 2018 01:56

Isotope combine 6 select dropdown

Δημοσίευση από DionisisZougras » 21 Μάιος 2018 02:51

Καλησπέρα δεν έχω καταφέρει να τα ενώσω. Ο κώδικας μου μέχρι τώρα στο script μου είναι

Κώδικας: Επιλογή όλων

// init Isotope
var $grid = $('.row').isotope({
  itemSelector: '.content',
  layoutMode: 'fitRows'
});

// filter functions > Model
var filterFns = {
  HP: function() {
    var name = $(this).find('.name').text();
    return name.match( /HP$/ );
  }
};
var filterFns2 = {
  Lenovo: function() {
    var name = $(this).find('.name').text();
    return name.match( /Lenovo$/ );
  }
};
var filterFns3 = {
  Dell: function() {
    var name = $(this).find('.name').text();
    return name.match( /Dell$/ );
  }
};
var filterFns4 = {
  Asus: function() {
    var name = $(this).find('.name').text();
    return name.match( /Asus$/ );
  }
};
var filterFns5 = {
  Apple: function() {
    var name = $(this).find('.name').text();
    return name.match( /Apple$/ );
  }
};

// filter functions > OS
var filterFns6 = {
  Linux: function() {
    var name = $(this).find('.name2').text();
    return name.match( /Linux$/ );
  }
};
var filterFns7 = {
  Mac: function() {
    var name = $(this).find('.name2').text();
    return name.match( /Mac$/ );
  }
};
var filterFns8 = {
  Windows7: function() {
    var name = $(this).find('.name2').text();
    return name.match( /Windows7$/ );
  }
};
var filterFns9 = {
  Windows10: function() {
    var name = $(this).find('.name2').text();
    return name.match( /Windows10$/ );
  }
};
var filterFns10 = {
  NoOS: function() {
    var name = $(this).find('.name2').text();
    return name.match( /NoOS$/ );
  }
};

// filter functions > CPU
var filterFns11 = {
  AMD: function() {
    var name = $(this).find('.name3').text();
    return name.match( /AMD$/ );
  }
};
var filterFns12 = {
  Intel: function() {
    var name = $(this).find('.name3').text();
    return name.match( /Intel$/ );
  }
};

// filter functions > Hard Drive
var filterFns13 = {
  SSD: function() {
    var name = $(this).find('.name4').text();
    return name.match( /SSD$/ );
  }
};
var filterFns14 = {
  HDD: function() {
    var name = $(this).find('.name4').text();
    return name.match( /HDD$/ );
  }
};
var filterFns15 = {
  Hybrid: function() {
    var name = $(this).find('.name4').text();
    return name.match( /Hybrid$/ );
  }
};

// filter functions > Card Graphics
var filterFns16 = {
  Nvidia: function() {
    var name = $(this).find('.name5').text();
    return name.match( /Nvidia$/ );
  }
};
var filterFns17 = {
  AMD2: function() {
    var name = $(this).find('.name5').text();
    return name.match( /AMD$/ );
  }
};
var filterFns18 = {
  Intel2: function() {
    var name = $(this).find('.name5').text();
    return name.match( /Intel$/ );
  }
};

// filter functions > RAM
var filterFns19 = {
  Two: function() {
    var name = $(this).find('.name6').text();
    return name.match( /2GB$/ );
  }
};
var filterFns20 = {
  Four: function() {
    var name = $(this).find('.name6').text();
    return name.match( /4GB$/ );
  }
};
var filterFns21 = {
  Six: function() {
    var name = $(this).find('.name6').text();
    return name.match( /6GB$/ );
  }
};
var filterFns22 = {
  Eight: function() {
    var name = $(this).find('.name6').text();
    return name.match( /8GB$/ );
  }
};
var filterFns23 = {
  Twelve: function() {
    var name = $(this).find('.name6').text();
    return name.match( /12GB$/ );
  }
};
var filterFns24 = {
  Sixteen: function() {
    var name = $(this).find('.name6').text();
    return name.match( /16GB$/ );
  }
};
var filterFns25 = {
  ThirtyTwo: function() {
    var name = $(this).find('.name6').text();
    return name.match( /32GB$/ );
  }
};

// bind filter on select change
//use the on() method to attach event handlers, this replaces the live(), delegate() and bind() methods from previous JQuery versions
$('.filters-select').on( 'change', function() {
  // get filter value from option value
  var filterValue = this.value;
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  filterValue = filterFns2[ filterValue ] || filterValue;
  filterValue = filterFns3[ filterValue ] || filterValue;
  filterValue = filterFns4[ filterValue ] || filterValue;
  filterValue = filterFns5[ filterValue ] || filterValue;
  filterValue = filterFns6[ filterValue ] || filterValue;
  filterValue = filterFns7[ filterValue ] || filterValue;
  filterValue = filterFns8[ filterValue ] || filterValue;
  filterValue = filterFns9[ filterValue ] || filterValue;
  filterValue = filterFns10[ filterValue ] || filterValue;
  filterValue = filterFns11[ filterValue ] || filterValue;
  filterValue = filterFns12[ filterValue ] || filterValue;
  filterValue = filterFns13[ filterValue ] || filterValue;
  filterValue = filterFns14[ filterValue ] || filterValue;
  filterValue = filterFns15[ filterValue ] || filterValue;
  filterValue = filterFns16[ filterValue ] || filterValue;
  filterValue = filterFns17[ filterValue ] || filterValue;
  filterValue = filterFns18[ filterValue ] || filterValue;
  filterValue = filterFns19[ filterValue ] || filterValue;
  filterValue = filterFns20[ filterValue ] || filterValue;
  filterValue = filterFns21[ filterValue ] || filterValue;
  filterValue = filterFns22[ filterValue ] || filterValue;
  filterValue = filterFns23[ filterValue ] || filterValue;
  filterValue = filterFns24[ filterValue ] || filterValue;
  filterValue = filterFns25[ filterValue ] || filterValue;
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

$('.button--reset').on( 'click', function() {
    // Setting the value as '*'
    $("#my_select").val('*');
    $("#my_select2").val('*');
    $("#my_select3").val('*');
    $("#my_select4").val('*');
    $("#my_select5").val('*');
    $("#my_select6").val('*');
    // reset filters
    filters = {};
    $grid.isotope({ filter: '*' });
});


και στην html ετσι

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<HTML Lang="en">
<HEAD>
<META Name="viewport" Content="width=device-width, initial-scale=1">
<META Content="text/html;" Charset="UTF-8" />
<TITLE>14o Μάθημα!</TITLE>
<SCRIPT SRC='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></SCRIPT>
<SCRIPT SRC='http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></SCRIPT>
<LINK REL="stylesheet" Type="text/css" HREF="PC_Styles 2.css">
</HEAD>

<BODY>
<!-- MAIN (Center website) -->
<DIV Class="main">
<H1>LAPTOP MARKET 2018</H1>
<HR><H2>Hardware Filters</H2>

<DIV>
  <SELECT Class="btn filters-select" ID="my_select">
     <OPTION Value="*">Κατασκευαστής</OPTION>
     <OPTION Value="HP">HP</OPTION>
     <OPTION Value="Lenovo">Lenovo</OPTION>
     <OPTION Value="Dell">Dell</OPTION>
     <OPTION Value="Asus">Asus</OPTION>
     <OPTION Value="Apple">Apple</OPTION>
  </SELECT>
  <SELECT Class="btn filters-select" ID="my_select2">
     <OPTION Value="*">Λειτουργικό Σύστημα (OS)</OPTION>
     <OPTION Value="Linux">Linux</OPTION>
     <OPTION Value="Mac">Mac</OPTION>
     <OPTION Value="Windows7">Windows 7</OPTION>
     <OPTION Value="Windows10">Windows 10</OPTION>
     <OPTION Value="NoOS">Χωρίς Λειτουργικό</OPTION>
  </SELECT>
  <SELECT Class="btn filters-select" ID="my_select3">
     <OPTION Value="*">Επεξεργαστής</OPTION>
     <OPTION Value="AMD">AMD</OPTION>
     <OPTION Value="Intel">Intel</OPTION>
  </SELECT>
  <SELECT Class="btn filters-select" ID="my_select4">
     <OPTION Value="*">Σκληρός Δίσκος</OPTION>
     <OPTION Value="HDD">HDD</OPTION>
     <OPTION Value="SSD">SSD</OPTION>
     <OPTION Value="Hybrid">Hybrid</OPTION>
  </SELECT>
  <SELECT Class="btn filters-select" ID="my_select5">
     <OPTION Value="*">Κάρτα Γραφικών</OPTION>
     <OPTION Value="Nvidia">Nvidia</OPTION>
     <OPTION Value="AMD2">AMD</OPTION>
     <OPTION Value="Intel2">Intel</OPTION>
  </SELECT>
  <SELECT Class="btn filters-select" ID="my_select6">
     <OPTION Value="*">Μνήμη RAM</OPTION>
     <OPTION Value="Two">2 GB</OPTION>
     <OPTION Value="Four">4 GB</OPTION>
     <OPTION Value="Six">6 GB</OPTION>
     <OPTION Value="Eight">8 GB</OPTION>
     <OPTION Value="Twelve">12 GB</OPTION>
     <OPTION Value="Sixteen">16 GB</OPTION>
     <OPTION Value="ThirtyTwo">32 GB</OPTION>
  </SELECT>
  <BUTTON Type="button" Class="button button--reset">Reload Filters!</BUTTON>
</DIV>

<!-- Portfolio Gallery Grid -->
<DIV Class="row">
  <DIV Class="column">
    <DIV Class="content" ID="element">
      <H3 Class="name">Dell</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">SSD</H3>
      <H3 Class="name5">AMD</H3>
      <H3 Class="name6">8GB</H3>
      <H3>Dell Inspiron 3567</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> DELL<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Core i7 7500U <BR>2.7GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> SSD 256GB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> AMD Radeon R5 M430<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 8 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 649 €</P>
      <BUTTON Type="button" OnClick="alert('Έχεις Έκπτωση 20% σε αυτό το προιόν! Άρα η τιμή τους έρχεται στα 519 €')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
  <DIV Class="column">
    <DIV Class="content" ID="element2">
      <H3 Class="name">Dell</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">SSD</H3>
      <H3 Class="name5">Intel</H3>
      <H3 Class="name6">8GB</H3>
      <H3>Dell Vostro 3568</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> DELL<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Core i5 7200U <BR>2.5GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> SSD 256GB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Intel HD Graphics 620<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 8 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 709 €</P>
      <BUTTON Type="button" OnClick="alert('Έχεις Έκπτωση 20% σε αυτό το προιόν! Άρα η τιμή τους έρχεται στα 568 €')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
  <DIV Class="column">
    <DIV Class="content" ID="element3">
      <H3 Class="name">Dell</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">HDD</H3>
      <H3 Class="name5">Intel</H3>
      <H3 Class="name6">4GB</H3>
      <H3>Dell Inspiron 3552</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> DELL<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Celeron Dual Core N3060 <BR>1.6GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> ΗDD 500GB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Intel HD Graphics 400<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 4 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 294 €</P>
      <BUTTON Type="button" OnClick="alert('Δεν έχεις Έκπτωση σε αυτό το προιόν!)"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>

  <DIV Class="column">
    <DIV Class="content" ID="element4">
      <H3 Class="name">Lenovo</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">HDD</H3>
      <H3 Class="name5">Intel</H3>
      <H3 Class="name6">4GB</H3>
      <H3>Lenovo V110-15ISK</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> LENOVO<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Celeron Dual Core 3855U <BR>1.6GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> HDD 500GB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Intel HD Graphics 510<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 4 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 318 €</P>
      <BUTTON Type="button" OnClick="alert('Δεν έχεις Έκπτωση σε αυτό το προιόν!')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
  <DIV Class="column">
    <DIV Class="content" ID="element5">
      <H3 Class="name">Lenovo</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">HDD</H3>
      <H3 Class="name5">Intel</H3>
      <H3 Class="name6">4GB</H3>
      <H3>Lenovo IdeaPad 320-15IAP</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> LENOVO<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel(R) Core(TM) Duo CPU E7500 <BR>2.94GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> HDD 1TB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Intel HD Graphics 505<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 4 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 350 €</P>
      <BUTTON Type="button" OnClick="alert('Δεν έχεις Έκπτωση σε αυτό το προιόν!')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
  <DIV Class="column">
    <DIV Class="content" ID="element6">
      <H3 Class="name">Lenovo</H3>
      <H3 Class="name2">Windows7</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">Hybrid</H3>
      <H3 Class="name5">AMD</H3>
      <H3 Class="name6">8GB</H3>
      <H3>Lenovo B51-80</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> LENOVO<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 7<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Core i7 6500U <BR>2.5GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> Hybrid 1TB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> AMD Radeon R5 M330<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 8 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 935 €</P>
      <BUTTON Type="button" OnClick="alert('Έχεις Έκπτωση 20% σε αυτό το προιόν! Άρα η τιμή τους έρχεται στα 751 €')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>

  <DIV Class="column">
    <DIV Class="content" ID="element7">
      <H3 Class="name">HP</H3>
      <H3 Class="name2">NoOS</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">HDD</H3>
      <H3 Class="name5">Intel</H3>
      <H3 Class="name6">4GB</H3>
      <H3>HP 250 G6</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> HP<BR>
      <FONT Color="blue"><B>OS:</B></FONT> No OS<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Core i3 6006U <BR>2GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> HDD 500GB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Intel HD Graphics 520<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 4 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 330 €</P>
      <BUTTON Type="button" OnClick="alert('Δεν έχεις Έκπτωση σε αυτό το προιόν!')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
  <DIV Class="column">
    <DIV Class="content" ID="element8">
      <H3 Class="name">HP</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">SSD</H3>
      <H3 Class="name5">Nvidia</H3>
      <H3 Class="name6">8GB</H3>
      <H3>HP ProBook 470 G4</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> HP<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Core i7 7500U <BR>2.7GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> SSD 256GB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Nvidia GeForce 930MX<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 8 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 1200 €</P>
      <BUTTON Type="button" OnClick="alert('Έχεις Έκπτωση 20% σε αυτό το προιόν! Άρα η τιμή τους έρχεται στα 960 €')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
  <DIV Class="column">
    <DIV Class="content" ID="element9">
      <H3 Class="name">HP</H3>
      <H3 Class="name2">Windows10</H3>
      <H3 Class="name3">Intel</H3>
      <H3 Class="name4">HDD</H3>
      <H3 Class="name5">Intel</H3>
      <H3 Class="name6">8GB</H3>
      <H3>HP 15-bs078cl</H3><P>
      <FONT Color="blue"><B>Model:</B></FONT> HP<BR>
      <FONT Color="blue"><B>OS:</B></FONT> Windows 10<BR>
      <FONT Color="blue"><B>CPU:</B></FONT> Intel Core i7 7500U <BR>2.7GHz<BR>
      <FONT Color="blue"><B>Hard Drive:</B></FONT> HDD 2TB<BR>
      <FONT Color="blue"><B>Card Graphic:</B></FONT> Intel HD Graphics 620<BR>
      <FONT Color="blue"><B>RAM:</B></FONT> 8 GB<BR><BR>
      <FONT Color="red"><B>Cost:</B></FONT> 609 €</P>
      <BUTTON Type="button" OnClick="alert('Έχεις Έκπτωση 20% σε αυτό το προιόν! Άρα η τιμή τους έρχεται στα 487 €')"><B>BUY!</B></BUTTON>
    </DIV>
  </DIV>
<!-- END GRID -->
</DIV>
<!-- END MAIN -->
</DIV>

<SCRIPT SRC="PC_Script 3.js"></SCRIPT>
</BODY>
</HTML>
Έχω ψάξει πολλά άρθρα και σελίδες αλλά δεν τα κατάφερα να βγάλω άκρη. Σας παρακαλώ, βοηθήστε με.

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες