如何通过id和class获取元素

Question

有没有JavaScript的替代方案来选择一个特定的元素，同时指定类和id？

例如，我有这样的内容：

<a class="q_href" onclick="showQuestion(1)">Question 1:</a>
<div class="q_content" id="1"></div>

<a class="q_href" onclick="showQuestion(2)">Question 2:</a>
<div class="q_content" id="2"></div>

我希望在函数中选择“问题X”链接下对应的div。

function showQuestion(id)
{
var thediv = GetByClassAndId("q_content",id); // how to implement this function ?
WriteQuestionIn(thediv); //Ajax
}

提前致谢。

- marvin

---

为什么？鉴于id应该是唯一的，仅凭它本身就足以选择一个元素。除非想要在只有它还具有指定类的情况下选择它？这种情况下，document.querySelectorAll("#id.class") 应该可以实现。 - nnnnnn

你想要实现什么目标？仅凭ID本身就足够了... - sgeddes

Answer 1

您可以尝试使用document.querySelector()

例如，像这样使用参数类似于css选择器：document.querySelector(".q_content#2")

- uoryon

---

你看到.q_content＃2和＃2应该是一样的，对吧？ - Itay Moav -Malimovka

没错，这是一样的。我批准你的答案。但是如果他真的想这么做，他可以使用这个... - uoryon

我误解了他的问题。 - uoryon

Answer 2

由于ID始终是唯一的（除非您犯了错误），因此您无需同时使用类和ID来选择元素。
这种方法是不正确的，应该尽可能避免。

我怀疑您的问题是ID只是一个数字。尝试添加一个以字母开头的前缀。查看此页面的源代码以查看示例。

<a class="q_href" onclick="showQuestion(1)">Question 1:</a>
<div class="q_content" id="q1"></div>

<a class="q_href" onclick="showQuestion(2)">Question 2:</a>
<div class="q_content" id="q2"></div>

function showQuestion(id)
{
var thediv = document.getElementById("q"+id);
WriteQuestionIn(thediv); //Ajax
}

- Itay Moav -Malimovka

---

我不知道id应该是唯一的。这就是为什么我问了这个问题，以防其他元素有id="1"。但你是对的，像“qcontent_1”这样的id会更好。谢谢！ - marvin

ID在页面中必须是唯一的，否则如果与此元素涉及复杂的JS/CSS，则可能会发生意外情况。 - Itay Moav -Malimovka

Answer 3

其实在jQuery中有一个函数$可以执行这个操作。如果你正在使用任何框架，那么你应该记住jQuery库总是可用的。否则，如果你正在使用自定义PHP，则需要添加像jQuery或其他类似的库，因为它们提供了许多类型的选择器。

现在在添加了jQuery之后，这里是代码：

$("#yourid") //basic selector
$("#yourid.yourclass").show()

使用 .show() 显示所选元素。

使用 .hide() 隐藏元素。

- Seetpal singh