Question

有没有办法将一个参数从html传递到jQuery？

要求是点击页面上的链接，切换此链接的一些文本，并隐藏其他链接的文本，所以我有以下jQuery：

$(link1).click(function(){
    $(hide1).hide(300, function(){
        $(hide2.hide(300, function(){
            $(toggle1).slideToggle(300);
        });
    });
});

如果页面上有五个链接，我需要重复上面的代码5次。关于如何减少重复代码的任何建议？我想到了以下内容，但不知何故不起作用。

function hideNShow(toggle1, hide1, hide2, hide3, hide4) {
    if(hide1) {
    $(hide1).hide(300, function(){
        if(hide2) {
        $(hide2).hide(300, function(){
            if(hide2) {
            $(hide2).hide(300, function(){
                if(hide3) {
                $(hide3).hide(300, function(){
                    if(hide4) {
                    $(hide4).hide(300, function(){
                        $(toggle1).slideToggle(300);
                    });
                    }
                });
                }
            });
            }
        });
        }
    });
    }
    return false;
};

任何帮助非常感谢。谢谢，六月

Answer 1

使用智能类名称可以获得更好的效果。以下示例具有一组链接，这些链接在单击时显示相应的段落。

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $('.togglers a').live('click', function(e) {
        e.preventDefault();

        // which number list item are we?
        var block = $(this).closest('ul').find('li').index( $(this).parent() );
        console.log(block);

        $('.blocks p').removeClass('visible').eq(block).addClass('visible');
    });
    </script> 
    <style type="text/css"> 
        .blocks p { display: none; }
        .visible { display: block !important; }
    </style> 
</head> 
<body> 

<!-- http://stackoverflow.com/questions/3960508/how-to-pass-parameter-from-html-to-jquery --> 

<ul class="togglers"> 
    <li><a href="#">Block 1</a></li> 
    <li><a href="#">Block 2</a></li> 
    <li><a href="#">Block 3</a></li> 
    <li><a href="#">Block 4</a></li> 
</ul> 

<div class="blocks"> 
    <p>This is block 1.</p> 
    <p>This is block 2.</p> 
    <p>This is block 3.</p> 
    <p>This is block 4.</p> 
</div> 

</body> 
</html>

请参阅稍微抽象的版本的编辑历史记录。

Answer 2

在数组中设置链接名称并迭代它们可以帮助您

for (id in contentDivs) {
            if (id === selectedId) {
                tabLinks[id].className = 'selected';
                contentDivs[id].className = 'cal';
            } else {
                tabLinks[id].className = '';
                contentDivs[id].className = 'cal hidden';
            }

这就是我用标签做同样的事情。

Answer 3

这看起来更像是结构问题，而不是编程问题。如果我正确理解您的问题，则会遇到以下问题：“当用户执行操作X时，请按顺序执行操作Y1, Y2, Y3 ... Yn。”

最好是创建一系列小函数来执行不同的操作（幻灯片，隐藏，切换等），将这些函数与名称相关联的调度表以及指令数组。

您甚至可以使用输入标记将它们放在链接旁边：

<input type="hidden" class="instructions" value="hide:div3,hide:div4,hide:div6,show:div9,toggle:span7,slide:p9">

然后使用jquery选择器查找与刚刚单击的链接关联的输入，将其解压缩并按照说明进行操作。这样，您的服务器就可以提供所需的信息，而不会使用过多的自动生成的javascript来破坏您的页面。

Answer 4

谢谢大家，这是我的更新代码：

$(function(){
    $('.myLinks a').live('click', function(e) {
        e.preventDefault();

    var linkClicked = $(this).closest('ul').find('li').index( $(this).parent() );

     $(".linkMessage div").each(function (i) {
        if(!(i == selectedAccNav))
            $(this).hide(300);
        if(i == selectedAccNav)
            $(this).slideToggle(300);
    })
        return false;
    });

}）;

再次感谢您的帮助。

- 6月

如何将参数从html传递给jQuery

4 个答案: