javascript - 尽管定义了 HTML ID，但 jQuery ID 返回未定义

Question

我正在尝试检索一个元素的 ID，将其存储为变量，然后使用该 ID 值与该部分中具有相同 ID 的其他元素进行交互。

<div class="mainContent">
<div class="articleContent">
     <h1>header1</h1>
     <p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">
</div>
</div>

<div class="mainContent">
<div class="articleContent">
     <h1>header2</h1>
     <p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore()">
</div>
</div>

然后是 JS/jQuery

function readMore() {
var subID = event.target.id;

var newTarget = document.getElementById(subID).getElementsByClassName("articlePara");

alert(newTarget.id);
}

此时，我只是尝试显示所选元素的 ID，但它返回未定义，并且在大多数情况下，人们似乎注意到 jQuery 由于 DOM 变量和 jQuery 变量之间的差异而变得困惑。

jsfiddle:https://jsfiddle.net/dr0f2nu3/

为了完全清楚，我希望能够单击一个元素，检索 ID，然后使用该 ID 值在该单击元素的族中选择一个元素。

Answer 1

只需删除 newTarget 末尾的 getElementsByClassName("articlePara"); 即可。您已经使用 id 调用该元素，提醒id 元素与 target.id

相同

function readMore() {
  var subID = event.target.id;
  var newTarget = $('[id='+subID+'][class="articlePara"]')
console.log(newTarget.attr('id'));
console.log(newTarget.length);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContent">
  <div class="articleContent">
    <h1>header</h1>
    <p class="articlePara" id="one"></p>
  </div>
  <div class="articleFooter" id="one" onclick="readMore()">click
  </div>
</div>