从jQuery $（this）对象获取特定数据

Question

我有一个节点树，想要在点击它们时从这些节点获取某些数据属性。

我无法弄清楚如何从点击它的对象中获取正确的数据。

var simple_chart_config = {
  chart: {
    container: "#tree"
  },
  nodeStructure: {
    text: {
      name: "King Miro",
      title: "King"
    },
    children: [{
      text: {
        name: "King Randor",
        title: "King"
      },
      children: [{
        text: {
          name: "He-Man",
          title: "Master of the Universe"
        },},{        
          text: {
            name: "She-Ra",
            title: "Princess"
          },
      }]
    }, {
      text: {
        name: "Skeletor",
        title: "Lord of Destruction"
      },
    }, ]
  }
}

var my_chart = new Treant(simple_chart_config);

$('body').on('click', '.Treant .node', function() {
    alert($(this).attr("title"));
    console.log($(this));    
});

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }

.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>




<div id="tree">
</div>

所以现在我正在尝试获取名称：和标题：

我尝试了许多不同版本的 $（this）.attr（“”）和 val（）。试图通过div类和类似的方式获取。

我现在卡住了。

Answer 1

您可以使用构建DOM来获取所需的正确文本：$(this).find(".node-name")和$(this).find(".node-title")

＆＃13;

＆＃13;

var simple_chart_config = {
  chart: {
    container: "#tree"
  },
  nodeStructure: {
    text: {
      name: "King Miro",
      title: "King"
    },
    children: [{
      text: {
        name: "King Randor",
        title: "King"
      },
      children: [{
        text: {
          name: "He-Man",
          title: "Master of the Universe"
        },},{        
          text: {
            name: "She-Ra",
            title: "Princess"
          },
      }]
    }, {
      text: {
        name: "Skeletor",
        title: "Lord of Destruction"
      },
    }, ]
  }
}

var my_chart = new Treant(simple_chart_config);

$('body').on('click', '.Treant .node', function() {
    alert($(this).find(".node-name").text());
    alert($(this).find(".node-title").text());
    console.log($(this));    
});

＆＃13;

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }

.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>




<div id="tree">
</div>

＆＃13;

＆＃13;

＆＃13;