使用 jQuery 选择多个对象

发布于 2024-12-28 04:02:06 字数 842 浏览 0 评论 0原文

基本上我尝试让链接滑下 div。这相当简单，但是我需要多个链接向下滑动各自的 div。我知道我可以只命名链接和 div 唯一的类并以这种方式解决问题，但这自然也需要为每个链接 div 复制 jQuery 代码，而我有很多。因此我需要一个通用脚本。我的情况的简化版本如下：

HTML：

<div>
    <a id=link1>toggle text 1</a>
    <div class=link1>TEXT 1</div>

    <a id=link2>toggle text 2</a>
    <div class=link2>TEXT 2</div>
</div>

我尝试使用 jQuery 通用脚本来实现此目的：

$(document).ready(function() {
    $('[id^=link]').bind('click', function() {
        var $div = $(this).attr('id');
        if($('[class=' + div + ']').is(':visible')) {
            $('[class=' + div + ']').slideUp();
        } else {
            $('[class=' + div + ']').slideDown();
        }

        return false;
    });
});

但正如人们所期望的，因为我在这里写它，所以它不起作用。我认为这与 ^= 有关，但我不知道如何改进它。

原文

Basically I attempt to have a link slide down a div. This is fairly simple however I require multiple links sliding down their respective divs. I understand I can just name the links and divs unique classes and solve the problem that way, however this naturally also requires a duplication of the jQuery code for each link-div and i have a lot. I therefore need a general script. A simplified version of my situation is as follows:

HTML:

<div>
    <a id=link1>toggle text 1</a>
    <div class=link1>TEXT 1</div>

    <a id=link2>toggle text 2</a>
    <div class=link2>TEXT 2</div>
</div>

My attempt at a jQuery general script for this:

$(document).ready(function() {
    $('[id^=link]').bind('click', function() {
        var $div = $(this).attr('id');
        if($('[class=' + div + ']').is(':visible')) {
            $('[class=' + div + ']').slideUp();
        } else {
            $('[class=' + div + ']').slideDown();
        }

        return false;
    });
});

But as one might expect since I'm writing here it does not work. I am thinking is has to do with the ^= but I can't figure out how to improve it.

分享到QQ

分享到微博

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

发布评论

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

深爱不及久伴 2025-01-04 04:02:06

那行不通？

$("a").click(function(){
  $(this).next().slideToggle();
});

Wouldn't that work?

$("a").click(function(){
  $(this).next().slideToggle();
});

回复收藏 0 原文

嘿哥们儿 2025-01-04 04:02:06

我建议在所有链接上使用一个公共类，例如...

<a id="link" class="link">

您可以选择多个...

$(".link")

替代方案，您可以选择所有 A 标签...

$("a")

I would suggest having a common class on all your links, for example...

<a id="link" class="link">

and you can select multiple with...

$(".link")

alternative, you could select all A tags....

$("a")

回复收藏 0 原文

粉红×色少女 2025-01-04 04:02:06

两个问题：

您声明了一个变量 $div 但使用了 div
要按类选择，请使用 .classname 而不是 '[class=...]

优化：

选择您的 div 并重新使用变量$div以避免重新选择同一元素 3 次
在事件处理程序中重新选择 3 次相同的元素
，this 是 DOM 元素。要获取其 ID，只需使用 this.id，不需要

这是代码：

$('[id^=link]').bind('click', function() {
    var id = this.id,
        $div = $('.' + id);

    if ($div.is(':visible')) {
        $div.slideUp();
    } else {
        $div.slideDown();
    }

    return false;
});

演示

Two problems:

you were declaring a variable $div but using div
to select by class, use .classname and not '[class=...]

Optimizations:

select your div and re-use the variable $divto avoid re-selecting 3 times the same element
in an event handler, this is the DOM element. To get its ID, just use this.id, not need for jquery

Here's the code:

$('[id^=link]').bind('click', function() {
    var id = this.id,
        $div = $('.' + id);

    if ($div.is(':visible')) {
        $div.slideUp();
    } else {
        $div.slideDown();
    }

    return false;
});

DEMO

回复收藏 0 原文

猫卆 2025-01-04 04:02:06

我意识到其他人正在提出替代方案，我鼓励您看看它们。为了回答您的具体问题，我相信它在于变量名称：

然后带有 div 的代码行，例如

if($('[class=' + div + ']').is(':visible')) {

应该有 $div 代替。

I realise that others are suggesting alternatives, and I would encorage you to look at them. To answer your specific problem I believe it lies with the variable names:

The lines of code with div in then, e.g.

if($('[class=' + div + ']').is(':visible')) {

Should possibly have $div instead.

回复收藏 0 原文

巷子口的你 2025-01-04 04:02:06

您可以尝试这个更详细的示例...希望这有帮助：

<html>
<head>
<title>jQuery Test Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $('[id^=link]').bind('click', function () {
            var myDiv = $(this).attr('id');
            var isVis = $('[class=' + myDiv + ']').is(':visible');
            if (isVis) 
            {
                $('[class=' + myDiv + ']').slideUp();
            }
            else 
            {
                $('[class=' + myDiv + ']').slideDown();
            }

            return false;
        });
    });
</script>

<div>
<a id="link1">toggle text 1</a>
<div class="link1">TEXT 1</div>

<a id="link2">toggle text 2</a>
<div class="link2">TEXT 2</div>
</div>

</body>
</html>

You can try this more verbose example... hope this helps:

<html>
<head>
<title>jQuery Test Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $('[id^=link]').bind('click', function () {
            var myDiv = $(this).attr('id');
            var isVis = $('[class=' + myDiv + ']').is(':visible');
            if (isVis) 
            {
                $('[class=' + myDiv + ']').slideUp();
            }
            else 
            {
                $('[class=' + myDiv + ']').slideDown();
            }

            return false;
        });
    });
</script>

<div>
<a id="link1">toggle text 1</a>
<div class="link1">TEXT 1</div>

<a id="link2">toggle text 2</a>
<div class="link2">TEXT 2</div>
</div>

</body>
</html>

回复收藏 0 原文

~没有更多了~