jquery调用对象的值不工作

Question

我试图用jquery调用数据对象。我有问题显示数据。如何在锚点击时显示结果标签和分类。

也是有任何建议简化click事件调用对象

谢谢

$(document).ready(function(){ 
 
    var data = [ 
 
    { 
 
    "id":1, 
 
    "label":"Sean", 
 
    "kategori":"Produk" 
 
    }, 
 
    { 
 
    "id":2, 
 
    "label":"Howard", 
 
    "kategori":"Produk" 
 
    }, 
 
    { 
 
    "id":3, 
 
    "label":"Paul", 
 
    "kategori":"Produk" 
 
    }, 
 
    { 
 
    "id":4, 
 
    "label":"Eugene", 
 
    "kategori":"Unit" 
 
    }, 
 
    { 
 
    "id":5, 
 
    "label":"Johnny", 
 
    "kategori":"Unit" 
 
    }, 
 
    { 
 
    "id":6, 
 
    "label":"Jacqueline", 
 
    "kategori":"Unit" 
 
    }, 
 
    { 
 
    "id":7, 
 
    "label":"Shirley", 
 
    "kategori":"Artikel" 
 
    }, 
 
    { 
 
    "id":8, 
 
    "label":"Julia", 
 
    "kategori":"Project" 
 
    }, 
 
    { 
 
    "id":9, 
 
    "label":"Russell", 
 
    "kategori":"Project" 
 
    }, 
 
    { 
 
    "id":10, 
 
    "label":"William", 
 
    "kategori":"Collection" 
 
    } 
 
]; 
 
    
 
\t \t $('.callProduct').on('click', function(e){ 
 
     e.preventDefault(); 
 
\t \t \t var call = $(this); 
 
\t \t \t var data_target = call.data('target'); 
 
\t \t \t var results = ''; 
 
\t \t \t $.each(data, function(index, value) { 
 
\t \t \t \t var resName = value.label.toString().toLowerCase(); 
 
\t \t \t \t var resCat = value.kategori.toString().toLowerCase(); 
 
\t \t \t \t if(resName != '' && data_target == resCat) { 
 
\t \t \t \t \t results += '<li>'+value.label+' - '+value.kategori+'</li>'; 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t if (results != '') { 
 
\t \t \t \t \t $('.resultProduct').append(results); 
 
\t \t \t \t } 
 
\t \t }); 
 
    
 
    \t \t $('.callUnit').on('click', function(e){ 
 
     e.preventDefault(); 
 
\t \t \t var call = $(this); 
 
\t \t \t var data_target = call.data('target'); 
 
\t \t \t var results = ''; 
 
\t \t \t $.each(data, function(index, value) { 
 
\t \t \t \t var resName = value.label.toString().toLowerCase(); 
 
\t \t \t \t var resCat = value.kategori.toString().toLowerCase(); 
 
\t \t \t \t if(resName != '' && data_target == resCat) { 
 
\t \t \t \t \t results += '<li>'+value.label+' - '+value.kategori+'</li>'; 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t if (results != '') { 
 
\t \t \t \t \t $('.resultProduct').append(results); 
 
\t \t \t \t } 
 
\t \t }); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="callData"> 
 
<ul> 
 
    <li><a href="#product" class="callProduct" data-target="product">product</a></li> 
 
    <li><a href="#unit" class="callUnit" data-target="unit">unit</a></li> 
 
    <li><a href="#artikel" class="callArtikel" data-target="artikel">artikel</a></li> 
 
    <li><a href="#project" class="callProject" data-target="project">project</a></li> 
 
</ul> 
 
</div> 
 

 
<div class="resultData"> 
 
    <div id="product"> 
 
    <ul class="resultProduct"></ul> 
 
    </div> 
 
    <div id="unit"> 
 
    <ul class="resultUnit"></ul> 
 
    </div> 
 
    <div id="artikel"> 
 
    <ul class="resultArtikel"></ul> 
 
    </div> 
 
    <div id="project"> 
 
    <ul class="resultProject"></ul> 
 
    </div> 
 
</div>

Answer 1

你几乎没有。您可以通过其对象的属性索引以及您想要检索的关键字来获取[标签]和[类别]值。

内，您的$。每（）方法，你可以打电话给他们：

// In getting the [label] value 
var sDataLabel = data[index].label; //Sean, Howard, Paul 

// In getting the [kategori] value 
var sDataCategory = data[index].kategori; //product 

现在要考虑的想法，这些密钥可能不存在，所以你需要检查[标签]和[类别]是否存在。您可能需要设置条件是否那些键（一个或多个）存在于每个对象

// Like this: 
var data = [{'id' : 10}, {'id' : 11, 'label' : 'Label1', kategori : 'products'}]; 
var sDataLabel = (data[index].hasOwnProperty('label') === true) ? data[index].label : 'No Label'; // No Label, Label 1 
var sDataCategory = (data[index].hasOwnProperty('kategori') === true) ? data[index].kategori : 'No Category'; // No Category, 'products' 

当你得到那些需要的值，那么你可以附加在你的[.resultProduct] DOM结果

var resName = sDataLabel.toLowerCase(); 
var resCat = sDataCategory.toLowerCase(); 
if (resName != '' && data_target === resCat) { 
    results += '<li>' + resName + ' - ' + resCat + '</li>'; 
} 

// This should be outside of your $.each method 
$('.resultProduct').append(results); 

下面是一个样本jsfiddle作进一步参考：http://jsfiddle.net/5wLm4t2n/

希望这对你有帮助。