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");
});

You can test it out here

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/

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

将变量发送到JQuery函数

7 个答案: