jQuery 基于添加特定搜索的点击事件迭代 JSON 对象 class

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 单击事件来执行此操作，该事件将 class 添加到单击的元素，然后对于该元素（具有单击的 class 名称），遍历 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);

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

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

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

关于这方面的任何帮助或指导都是可靠的。

编辑：奥赞的回答非常有效。根据他的要求，我正在用我在创建元素时使用的原始 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]);  
});

jQuery 基于添加特定搜索的点击事件迭代 JSON 对象 class

jQuery iterate over JSON Object based on click event that adds search specific class

jquery

arrays

json

click

each