jQuery фильтрация и отображение результатов

Я пытаюсь создать страницу с короткими фрагментами информации. Слева заголовки перечислены как ссылки. При нажатии на них соответствующий текст отображается справа, по одному за раз.jQuery фильтрация и отображение результатов

Я хочу, однако, добавить фильтрацию в заголовки, чтобы они отображались в разделах на странице в соответствии с их категорией (A, B и C).

Здесь я застрял. Мне не удается поймать эту категорию, и я точно не знаю, где в сценарии будет проходить фильтрация. Я был бы очень рад, если бы кто-то предложил, что здесь отсутствует.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <style> 
     li { 
      width: 664px; 
     } 
     a { 
      font-family: Arial, Helvetica, sans-serif; 
      size: 14px; 
      line-height: 24px; 
      text-decoration: none; 
     } 
     .description { 
      position: absolute; 
      top: 4px; 
      left: 796px; 
      margin: 12px 24px 24px 24px; 
      padding: 0px 24px 24px 0px; 
      border-right: 1px solid #dddddd; 
      border-bottom: 1px solid #dddddd; 
      width: 712px; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 14px; 
      color: #444444; 
      line-height: 20px;   
     } 
    </style>  
    <script src="jquery-1.11.1.js"></script> 
    </head> 
<body> 
<script type="text/javascript"> 

var article = [ { "title": "Sed ut perspiciatis", "category": "A", "description": "<div><b>Heading:</b> Sed ut perspiciatis unde omnis</div> <div><b>Text:</b> Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo....</div>" }, 
{ "title": "Iste natus error", "category": "B", "description": "<div><b>Heading:</b> Iste natus error sit voluptatem</div> <div><b>Text:</b> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</div>" }, 
{ "title": "Accusantium doloremque", "category": "C", "description": "<div><b>Heading:</b> Accusantium doloremque laudantium</div> <div><b>Text:</b> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium...</div>" }, 
{ "title": "Totam rem", "category": "A", "description": "<div><b>Heading:</b> Totam rem aperiam</div> <div><b>Text:</b> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus...</div>" } ] 

function getData() { 
    var html = '';  

    for(i = 0; i < article.length; i++) { 
      html += "<li data-text='" + "'>" + article[i].title.link(article[i].description) + "</li>"; 
    } 

$('#showData').html('<ul>' + html + '</ul>');  

$('#showData').on('click', 'a', function(e) { 

    $('#showData .description').remove(); 

    $(this).after('<div class="description" id="txt">' + $(this).attr('href') + '</div>'); 

    e.preventDefault();  
    }); 
} 
$(document).ready(function() { 
    getData(); 
}); 

</script> 
    <div id="showData"></div> 
</body> 
</html>

источник

2015-03-19 Cunctator03

У вас есть избыточная фигурная скобка после

for(i = 0; i < article.length; i++) { 
     html += "<li data-text='" + "'>" + article[i].title.link(article[i].description) + "</li>"; 
    }

источник

2015-03-19 15:40:08

Спасибо. Я исправил это. – Cunctator03

jQuery фильтрация и отображение результатов

ответ

Смежные вопросы