logo标签列表

使用jQuery进行多个对象选择

jqueryclassclickslidedown
3

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

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')) {，你忘记了变量名中的 $ 符号。 - chrisn
在使用上下文中，你的 div 变量不应该是 $div 吗？ - James Wiseman
5个回答
1

两个问题：

  • 你声明了一个变量$div，但使用的是div

  • 要选择类，请使用.classname而不是'[class=...]

优化：

  • 选择您的

    并重复使用变量$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;
});

演示

1

那不行吗？

$("a").click(function(){
  $(this).next().slideToggle();
});
1
哈哈，我猜我还需要学习jQuery中所有预编程函数:P 是的，那个完美地运行了！非常感谢！ - Andreas Jarbol
2
好的，这段代码将绑定到页面中所有<a>链接，并slideToggle 任何下一个元素。不是很安全/具体化。 - Didier Ghys
当然！我不想在不知道他的页面的情况下具体说明，但我不喜欢这个“[id^=link]”选择器。那只是一个例子。 - Nabab
1
我建议在所有链接上都有一个共同的类，例如...
<a id="link" class="link">

而且您可以选择多个...

$(".link")

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

$("a")
0

我意识到其他人正在提出替代方案，我鼓励您去看看。针对您的具体问题，我认为它在于变量名称：

代码行中带有div的地方，例如：

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

可能应该使用$div。

0

你可以尝试这个更详细的例子...希望这能帮到你：

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接