使用 jQuery 选择多个对象答案

【问题标题】：Multiple object selection with jQuery使用 jQuery 选择多个对象
【发布时间】：2012-02-13 06:11:36
【问题描述】：

基本上我试图让一个链接滑下一个 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;
    });
});

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

【问题讨论】：

if($('[class=' + div + ']').is(':visible')) { 应该是if($('[class=' + $div + ']').is(':visible')) {，你忘记了变量名中的$
您的 div 变量在使用时不应该是 $div 吗？

标签： jquery class click slidedown

【解决方案1】：

这样不行吗？

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

【讨论】：

哈哈哇，我想我仍然需要了解 jQuery 中的所有预编程函数：P 是的，它完美地工作！感谢一百万！
好吧，这段代码将绑定到页面中的all <a> 链接和slideToggle any 下一个元素。不是很安全/具体。
当然！我不想在不知道他的页面的情况下具体说明，但我不喜欢这个 '[id^=link]' 选择器。这只是一个例子。

【解决方案2】：

我建议在你的所有链接上设置一个通用类，例如...

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

你可以选择多个...

$(".link")

或者，你可以选择所有的A标签......

$("a")

【讨论】：

【解决方案3】：

两个问题：

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

优化：

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

代码如下：

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

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

    return false;
});

DEMO

【讨论】：

【解决方案4】：

我知道其他人正在提出替代方案，我鼓励您查看它们。为了回答您的具体问题，我认为这与变量名有关：

当时带有div的代码行，例如

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

应该有$div 代替。

【讨论】：

【解决方案5】：

你可以试试这个更详细的例子......希望这会有所帮助：

<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>

【讨论】：