Question

我有一个监听onclick事件的元素。一旦点击它就调用一个函数。在该元素之后是＆lt; dd＆gt;我想在CSS选择器中选择。点击的元素是＆lt;选择＆gt;。我该怎么办？

这是HTML：

<select onclick="myFunction();">...</select> 
<dd>...</dd>

function myFunction() {
    // What do I have to write for the ??????
    $$('?????? dd').toggle();
}

注意：有很多选择/ dd组合，所以我真的必须在触发元素之后得到下一个dd。

Answer 1

最小的变化是：将this传递到您的函数中：

<select onclick="myFunction(this);">...</select>

......然后：

function myFunction(select) {
    $(select).next().toggle();
}

$增强了元素，然后您可以使用next移动到下一个元素。如果您愿意，可以使用.next('dd')，但在您的情况下，dd 是下一个元素。

仍然使用onxyz属性，这有点老套。您可以考虑通过observe来解决问题。

Answer 2

我猜你的意思是：

this.next("dd");

（指定dd所以当标记出错时，没有选择其他元素）

如果您只尝试CSS选择器，请尝试以下操作：

$("select + dd").toggle();

注意：这会切换dd后面的所有select。

注2 ：显然在Prototype中工作，但在jQuery中工作。< / p>

参见T.J.Crowder的评论：

[这在Prototype中不起作用]因为Prototype中的$按ID查找元素。 $$更像是 jQuery的$，但它返回的内容并不像基于集合的操作那样 jQuery（或者更确切地说，不是与操作系统相同的基于集合的操作）你可以做个别元素;你必须使用invoke）。

next()同时适用于jQuery Prototype。

Answer 3

使用：

$(this).next("dd").toggle(); --> this is Jquery


$(element).next("dd").toggle();

请参阅链接Element.next

Answer 4

<select>...</select> 
<dd>...</dd>

$('select').change(function(){
   $(this).next("dd").toggle();
});

Answer 5

更好地使用不引人注目的javascript，因此你的js更好地从html标记中加入。

HTML：

<select><option value="test">Test</option></select> 
<dd>Test</dd>

JS：

//Event.observe(window, "load", function() {
document.observe('dom:loaded', function() {
    $$('select')[0].observe('click', function(event) {
        var next = event.element().next();
        next.toggle();
    });
});

JSFiddle

触发onclick的元素的下一个元素的CSS选择器？

5 个答案: