3

我有一个监听 onclick 事件的元素。一旦被点击，它就会调用一个函数。在那个元素之后是一个 < dd > 我想在 CSS 选择器中选择它。被点击的元素是一个<select>。我该怎么做？

这是 HTML：

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

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

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

4

5 回答 5

4

最小的变化是：this传入你的函数：

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

...进而：

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

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

那仍然使用onxyz属性，这有点过时了。您可能会考虑observe改为通过连接。

于 2013-07-15T10:00:53.480 回答
2

我猜你的意思是： 

this.next("dd");

（指定dd当标记中有错误时，不选择其他元素）

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

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

注意：这将切换所有dd跟在 a 后面的 s select。

注 2：显然这在Prototype中不起作用，但在jQuery中起作用。

请参阅 TJCrowder 的评论：

[这在 Prototype 中不起作用] 因为 Prototype 中的 $ 按 ID 查找元素。$$ 更像 jQuery 的 $，但它返回的内容不像 jQuery 那样执行基于集合的操作（或者更确切地说，与您可以对单个元素执行的操作不同；您必须使用调用） .

next()适用于jQuery作为Prototype。

于 2013-07-15T09:59:54.963 回答
1

采用：

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


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

查看链接Element.next

于 2013-07-15T10:03:02.057 回答
0 
<select>...</select> 
<dd>...</dd>

$('select').change(function(){
   $(this).next("dd").toggle();
});
于 2013-07-15T10:01:18.747 回答
0

更好地使用不显眼的 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

于 2013-07-15T10:32:41.130 回答