Сортировка элементов с помощью jQuery с использованием атрибутов данных
Просто чтобы вы знали, я новичок. Я пытаюсь запрограммировать определенную функцию для навигации по меню на моем сайте. (http://thomasmedicus.at/)
Я хочу, чтобы посетители на моем веб-сайте могли сортировать мои проекты либо по «дате», либо по «релевантности». Я создал это изображение, чтобы вы могли лучше понять меня:предварительный просмотр
На первом изображении проекты отсортированы по релевантности. для этого «дата» поражает корыто. когда вы теперь щелкаете мышью по «дате», расположенной в рамке, порядок проектов (2, 1, 3) меняется. то, что также происходит, - то, что "уместность" является корыто корытом и "датой" больше не. Конечно, это также должно работать в обратном направлении, когда вы снова нажимаете «Равенство». я надеюсь, вы поняли идею?
Мне удалось создать этот плохо запрограммированный сценарий, но здесь не запрограммировано:
<html>
<head>
<style type="text/css">
<!--
body {
text-align: left;
}
#fullDescrip {
width: 450px;
height: 200px;
border: solid #000000 2px;
margin: 0 auto;
text-align: justify;
padding: 20px;
}
#prodContainer .products {
margin: 10px;
border: solid #AAAAAA 1px;
width: 100px;
height: 100px;
}
#prodContainer2 .products {
margin: 10px;
border: solid #AAAAAA 1px;
width: 100px;
height: 100px;
}
-->
</style>
<script>
var rand = Math.floor(Math.random() * 2);//the number here must be the total number of products you have listed
var prod = new Array();
prod[0] = "<width='100' height='100'>changed here!";
prod[1] = "<width='100' height='100'>changed again!";
function loadProd(content){
document.getElementById('fullDescrip').innerHTML = content;
}
</script>
</head>
<body>
<div id="fullDescrip">
<script>
document.getElementById('fullDescrip').innerHTML = prod[rand];
</script>
</div>
<table id="prodContainer">
<tr>
<td>
<div id="prod1" class="products" onClick="loadProd(prod[0])">
button 1
</div>
</td>
<td>
<table id="prodContainer2">
<tr>
<td>
<div id="prod2" class="products" onClick="loadProd(prod[1])">
button 2
</div>
</td>
</body>
</html>было бы здорово, если бы вы могли помочь мне здесь. так как я не программист, я не могу сделать это самостоятельно ...
спасибо том