Question

我试图设置一个包含短信息的页面。在左侧，标题列为链接。单击时，它们各自的文本将一次显示在右侧。

但是，我希望在标题中添加一些过滤功能，因此它们会根据类别（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>

Answer 1

你有多余的花括号之后

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

jQuery过滤和显示结果

1 个答案: