jQuery 基于添加搜索特定类的单击事件遍历 JSON 对象

Question

我有一个 JSON 对象：

var json = {

 "projectData": [
    {
        "projectLogo": "images/projects/NUKETOWN/logo.gif",
        "projectName": "NUKETOWN",
        "projectDescription": "Labore amet deserunt mollit ad aute incididunt elit mollit. Reprehenderit minim dolore adipisicing dolore consequat ut deserunt proident. Id amet incididunt sit anim aliquip nisi nostrud quis laboris id ex ea et minim. Amet et ullamco cupidatat pariatur exercitation ex reprehenderit occaecat. Cupidatat fugiat officia exercitation dolor. Consectetur anim Lorem ut nulla ullamco occaecat.\r\n",
        "projectTags": "cms",
        "_id": "54a1583172bcc9e24149f938",
        "index": 0,
        "isActive": false
    },
    {
        "projectLogo": "images/projects/3DAUDIOPARTICLEVIZ/logo.png",
        "projectName": "PARTICLE AUDIO VISUALIZER",
        "projectDescription": "Magna ullamco aliqua aute qui enim est. Qui labore adipisicing id elit do. Lorem nostrud fugiat enim deserunt sit ut Lorem esse reprehenderit minim. Deserunt irure anim tempor fugiat nostrud. Ex sit proident irure duis incididunt. Adipisicing deserunt cupidatat cillum do sit ut elit nulla Lorem.\r\n",
        "projectTags": "design",
        "_id": "54a15831d37fba1c8326508f",
        "index": 1,
        "isActive": false
    },
    {
        "projectLogo": "images/projects/DANETHEORY/logo.png",
        "projectName": "DANETHEORY",
        "projectDescription": "Commodo anim ea nostrud do voluptate mollit nostrud aliquip consequat. Et et ea nulla consectetur Lorem culpa nostrud sint adipisicing eiusmod. Deserunt laborum do culpa deserunt esse dolor id. Fugiat veniam est elit nulla. Nostrud elit sint deserunt nulla. Cillum aute magna commodo consequat velit ad labore culpa adipisicing sunt. Aliquip aliqua sint aliqua proident magna sit duis laboris exercitation occaecat velit do.\r\n",
        "projectTags": "drupal",
        "_id": "54a15831e69781e59f56d271",
        "index": 2,
        "isActive": false
    },

等等

总共 40 项。对象的主要变量是“json”，我在对象内部使用了一个主要标识符，即“projectData”（不确定这是否是正确的做法）。

我想要做的是从 JSON 对象中提取特定字段。我想通过一个 jQuery click 事件来执行此操作，该事件将一个类添加到单击的元素，然后对于该元素（具有单击的类名称），遍历 JSON 对象并单独提取我需要的数据。

到目前为止，我只能在单击时提取每个对象的所有字段。我该如何编写我的 if 语句来纠正这个问题？

这是我的代码：

// CLICK EVENT FOR ELEMENT  
$('.element').on({

click: function() {         

    $(this).addClass('clicked');

        $.each(json, function (key, data) {

            //console.log(key);

                //if ($(this).hasClass( "clicked" )) {

                    $.each(data, function (index, data) {

                        console.log('index', data.projectName);

                        });
                    //});
                });
            }
        });

上面的 sn-p 将控制所有 40 个元素的项目名称。取消注释 if 语句会破坏场景（这是使用 threejs 和 CSS3Renderer 构建的）。

基本上在元素点击时，我想要一个模式下拉与点击的元素相关的 JSON 数据。我已经能够使用 JavaScript 的 for 循环在我的场景中创建所有对象。我正在使用 jQuery 来处理悬停事件并单击。链接很简单，可以实现。

对此的任何帮助或指导都是可靠的。

编辑： Ozan 的回答效果很好。根据他的要求，我正在使用我在创建元素时使用的原始 JS for 循环来更新这个问题。 Ozan 的答案中的 jQuery 有效，因为我已经用原始循环索引了 JSON 对象。

    // FUNCTION LOOP TO CREATE "ELEMENTS" VIA JSON OBJECT
for ( var i = 0; i < json.projectData.length; i ++ ) {

    // Individual Element Creation
    var element = document.createElement( 'div' );
        element.className = 'element';

    // Individual Element Picture Creation
    var logo = document.createElement( 'div' );
        logo.className = 'logo';
        logo.innerHTML = "<img src='" +json.projectData[i].projectLogo + "'>";                  

            element.appendChild( logo );

    // Individual Element Title Creation        
    var elemTitle = document.createElement( 'H1' );
        elemTitle.className = 'elemTitle';
        elemTitle.innerHTML = json.projectData[i].projectName;                  

            element.appendChild( elemTitle );

Answer 1

你给出的for循环表明这些元素按照它们在数组中的显示顺序放置到dom中，因此你可以使用它们的索引号来查找相关数据。

$(".element").on("click", function(e){
  var index = $(".element").index(this);
  console.log(json.projectData[index]);  
});