当前位置：文江博客话题详情

如何使用 jQuery 创建通用 id 引用

发布于 2024-08-12 19:58:38 字数 206 浏览 8 评论 0原文

我有大约 6 个具有相同类的 div 元素。当我将鼠标悬停在其中任何一个上时，我想在它们旁边显示另一个 div。

我正在考虑给它们全部一个 id="mydiv-divname" 形式的 id，其中 mydiv- 将始终保持不变。

我将如何引用 mydiv-* 元素。我找不到确切的语法，但我认为它应该类似于 $("#mydiv-"[*])，其中 * 代表某种通配符。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洒一地阳光 2024-08-19 19:58:38

ID 有什么用途？如果它们都用相同的类名标记，您可以按类访问它们：

`$(".className")...

要在悬停其中一个元素时触发事件，请使用

`$(".className").hover(... )

请注意，hover() 中的函数只会针对悬停的元素触发实际上正在悬停。

他们所做的事情与您想要实现的目标类似 here - 悬停时淡入或淡出一个元素（页面上标有该类的许多元素）

What purpose does the ID serve? If they are all tagged with the same class name, you can access them all by class:

`$(".className")...

To trigger an event when one of those elements is hovered, use

`$(".className").hover(... )

Note that the function within the hover() will only be triggered for the element which is actually being hovered.

They do something similar to what you're trying to achieve here - fading one element in or out on hover (of many elements on the page marked with that class)

回复收藏 0 原文

顾忌 2024-08-19 19:58:38

为什么不能只在选择器中使用类而不是 id，如

jQuery('.commonClass');

回复收藏 0 原文

倾｀听者〃 2024-08-19 19:58:38

看起来你想要这样的东西：

HTML:

<div class="content" id="con_a">Hello world.</div>
  <div id="show_con_a" style="display:none">Show Me on content div "a" hover</div>

<div class="content" id="con_b">Nice to meet you.</div>
  <div id="show_con_b" style="display:none">Show Me on content div "b" hover</div>

<div class="content" id="con_c">See you later.</div>
  <div id="show_con_c" style="display:none">Show Me content div "c" hover</div>

JAVASCRIPT:

//Collect all divs with 'content' class
$('.content').each(function(){
    //Set mouse handler for each content div
    $(this).hover(function(){
        $('#show_' + this.id).show();
    },
    function(){
        $('#show_' + this.id).hide();
    });
});

ALTERNATIVE JAVASCRIPT:

//Collect all divs with an id that begins with 'con_'
$("[id=^'con_']").each(function(){
    //Set mouse handler for each content div
    $(this).hover(function(){
        $('#show_' + this.id).show();
    },
    function(){
        $('#show_' + this.id).hide();
    });
});

It seems you are going for something like this:

HTML:

<div class="content" id="con_a">Hello world.</div>
  <div id="show_con_a" style="display:none">Show Me on content div "a" hover</div>

<div class="content" id="con_b">Nice to meet you.</div>
  <div id="show_con_b" style="display:none">Show Me on content div "b" hover</div>

<div class="content" id="con_c">See you later.</div>
  <div id="show_con_c" style="display:none">Show Me content div "c" hover</div>

JAVASCRIPT:

//Collect all divs with 'content' class
$('.content').each(function(){
    //Set mouse handler for each content div
    $(this).hover(function(){
        $('#show_' + this.id).show();
    },
    function(){
        $('#show_' + this.id).hide();
    });
});

ALTERNATIVE JAVASCRIPT:

//Collect all divs with an id that begins with 'con_'
$("[id=^'con_']").each(function(){
    //Set mouse handler for each content div
    $(this).hover(function(){
        $('#show_' + this.id).show();
    },
    function(){
        $('#show_' + this.id).hide();
    });
});

回复收藏 0 原文

~没有更多了~