将变量发送到JQuery函数

Question

我是jQuery的新手，但我希望有人能够帮助我。 我搜索了这个论坛（和其他人），但一直找不到我能做的答案。

我有这样的链接：

<a href="#">

和一个jQuery脚本：

$("div.show_dialogbox").click(function(){
    $("div#dialogboxwraper").animate({
        height: "400px"
    }, "slow")
    .animate({
        height: "200px"
    }, "slow");
});

我希望能够发送一个带有链接的变量，并在脚本中使用它，如下所示：

<a href="#" OnClick="variable(200)">


$("div.show_dialogbox").click(function(variable){
    $("div#dialogboxwraper").animate({
        height: variable+200+"px"
    }, "slow")
    .animate({
        height: variable+"px"
    }, "slow");
});

Answer 1

我会在这里使用数据属性，在jQuery 1.4.3中添加了更多支持，如下所示：

<a href="#" class="show_dialogbox" data-height="200">

然后在jQuery中：

$("a.show_dialogbox").click(function(){
  $("#dialogboxwraper").animate({
    height: $(this).data('height') + 200
  }, "slow")
  .animate({
    height: $(this).data('height')
  }, "slow");
});

你可以在这里测试一下 。

Answer 2

不确定明确发送变量，但你可以将锚的title设置为“200px”，然后在你的函数内部执行类似的操作

var h = $(this).attr('title');

Answer 3

做一个功能比;

<a href="#" OnClick="shoot(200)">

///

function shoot (number) {

    $("div#dialogboxwraper").animate({
        height: number+200+"px"
    }, "slow")
    .animate({
        height: number+"px"
    }, "slow");


}

注意：您必须添加onclick="shoot(200);" 在那些过程中

Answer 4

您还可以使用动画到某个类的插件，这样您就可以将站点的显示部分与站点的数据部分分开。 您将为“已打开”状态创建一个CSS类，为“已关闭”状态创建另一个CSS类，然后使用下面的插件之一在它们之间进行动画处理。

http://plugins.jquery.com/project/animate-to-class

jQuery UI，也扩展了animate类，所以你可以这样做：

http://jqueryui.com/demos/switchClass/

这是一个演示，它使用jQuery UI：

http://jsbin.com/ijewu3

和编辑链接：

http://jsbin.com/ijewu3/edit

Answer 5

最简单的方法是将实际启动动画的代码移动到一个单独的函数，如下所示：

function doSomeAwesomeAnimation(variable){
   $("div#dialogboxwraper").animate({
        height: variable+200+"px"
    }, "slow")
    .animate({
        height: variable+"px"
    }, "slow");
}

然后，您可以在链接上连接点击事件，如下所示：

$("div.show_dialogbox").bind("click", doSomeAwesomeAnimation(200));

编辑：快速指向您用于连接点击事件的选择器的目标是一个带有show_dialogbox类的div，而不是它可能包含的链接html元素。 只是想确保你知道这一点。

Answer 6

html标签可以有rev =“”和rel =“”字符串，可以解析。 你也可以看看这样的东西：`...

这将设置一个标签参数，然后继续点击后应该发生的任何其他事情。

Answer 7

谢谢大家的帮助和意见:-)

我最终使用了vertazzar的答案，因为我发现它是最让我感到满意的人（并且很容易。）

这就是我最终的结果

链接：

<a href="#" OnClick="showdialogbox(350,'test1');" class="show_dialogbox">Dialog test 1</a><br /><a href="#" OnClick="showdialogbox(200,'test2');" class="show_dialogbox">Dialog test 2</a> 

和功能

    // SHOW DIALOG BOX
function showdialogbox (boxh, boxc) {
    if ($("div#dialogboxwrap").css("height") === "0px") {
            $("#dialogboxcontent").load("test1.html #"+boxc);
    }
    else {
        $("div#dialogboxwrap").animate({
            height: "0px"
            }, "slow",function(){
            $("#dialogboxcontent").load("test1.html #"+boxc);
        });
    }
    $('div#dialogboxcontent').css('height', boxh-80+"px");
    $("div#dialogboxwrap").animate({
        height: boxh+100+"px"
    }, "slow")
    .animate({
        height: boxh+"px"
    }, "slow");
}
// CLOSE DIALOG BOX
$(document).ready(function() {
   $("div#close_dialogbox").click(function(){
        $("div#dialogboxwrap").animate({
            height: "0px"
        }, "slow");
    });

结果可以在这里看到（评论是velkome） http://www.gynther-klanen.dk/hr/

现在我如何关闭这个问题，我可以在这里给你信任吗？