为什么点击元素在jquery中返回undefined？

Question

我正在尝试获取已点击的跨度值，但我要么继续得到未定义的，要么＆＃34;＆＃34;空白字符串。我在$（this）.text（）;和$（this）.val（）;未定义。

以下是codepen - https://codepen.io/xblack/pen/ypXPee

n

的Javascript

n

Answer 1

试试这个演示，你应该使用html（）作为span，div，p之类的标签。

// $('.legend-cards').on('click', () => {
//     let target = $(this).attr('id');
//     console.log(target,this.id);
// });

$('.value').each((i,el)=>{ 
  console.log(i,$(el).html(), $(el).closest('div').attr('id'));   
});    
  
$('.title').on('click',function(){  
  console.log($(this).html()); 
});

$('.value').on('click',function(){  
  console.log($(this).html()); 
});

.legends {
  width: 100%;
  height: 100%;
  font-family:sans-serif;
}

.legends .legend-cards {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  grid-template-rows: 10% 1fr;
  grid-gap: 5px;
  color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.title:hover, .value:hover{
  background:black;
}

.legend-cards .legend-symbole {
  grid-column: 1/2;
  grid-row: 1/3;
  align-self: center;
  justify-self: center;
  font-size: 24px;
}

.title {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
}

.value {
  align-self: center;
  font-size: 16px;
  font-weight: 300;
  opacity: 0.7;
}

.legend-cards .legend-title-low {
  grid-column: 2/3;
  grid-row: 1/2;
}

.legend-cards .legend-value-low {
  grid-column: 2/3;
  grid-row: 2/3;
}

.legend-cards .legend-title-high {
  grid-column: 3/4;
  grid-row: 1/2;
}

.legend-cards .legend-value-high {
  grid-column: 3/4;
  grid-row: 2/3;
}

.value:hover .legend-cards {
  background: black;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="legends">
  <div id="alpha" class="legend-cards">
    <span class="legend-symbole">α</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="beta" class="legend-cards">
    <span class="legend-symbole">β</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="gamma" class="legend-cards">
    <span class="legend-symbole">γ</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="other" class="legend-cards">
    <span class="legend-symbole">δ/θ</span>
    <span class="legend-title-low title">DELTA</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">THETA</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="eegSense" class="legend-cards">
    <span class="legend-symbole"><img src="img/pain.svg" style="width:50%" alt=""></span>
    <span class="legend-title-low title">ATTENTION</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">MEDITATION</span>
    <span class="legend-value-high value">3657890</span>
  </div>
</div>