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

只需删除getElementsByClassName("articlePara");末尾的newTarget。已经使用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>

Answer 2

 $('.articleFooter').click(function() { 
        var b=subId; //can be any 
        var a="p[id="+b+"]"+"[class='articlePara']";
        $(a).something;
    });

Answer 3

正如您之前所读过的那样，您应该保持您的ID唯一性，并且您应该避免在html中使用onclick，但您可以这样做。

使用querySelector获取元素，然后使用parentElement，您可以检索该元素的父元素。

function readMore(el) {
  var articleFooterId = el.id;
  var articlePara = document.querySelector(".articleContent #"+articleFooterId);
  var articleContent = articlePara.parentElement;

  console.log('articleFooter', articleFooterId);
  console.log('articlePara', articlePara);
  console.log('articleContent', articleContent);
}

在您的HTML中，您可以返回“这个＆＃39;通过执行readMore（this）来反对该函数。

<div class="mainContent">
  <div class="articleContent">
       <h1>header1</h1>
       <p class="articlePara" id="one">para1</p>
  </div>
  <div class="articleFooter" id="one" onclick="readMore(this)">footertext</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(this)">footertext</div>
</div>

jsfiddle

Answer 4

如果你正在使用Jquery：

$(function () {
    $('div.articleFooter').click(function () {
        var para = $(this).prev().find('p.articlePara').text();
        alert('T:' + para);
    });
})

Answer 5

您忘记在function moveDirectory(name, parent, after) { return DirectoryApi.move({name: name}, {parent: parent, after: after}); }调用html中传递event作为参数。
在您的javascript中，您还需要在括号中包含onclick=。
```
event
```
如果你写window.readMore = function(event) {...}那就是说你想让你点击的元素 CHILD 元素的document.getElementById(subID).getElementsByClassName("articlePara");等于class {1}}。空无一人。所以你得到了不确定。

如果要查找ID为articlePara和类one的所有元素，可以使用jQuery轻松完成：
```
articlePara
```

您可以在onclick处理函数中插入一行newtarget = $("#one.articlePara");来触发浏览器的调试工具并检查变量的值。然后你会知道你是否得到了你想要的东西。

虽然定义了HTML ID，但jQuery ID返回未定义

5 个答案: