Question

我有以下脚本：

<!doctype HTML>
<html lang = "en">
    <head>
        <title>Learn jQuery</title>
        <link rel = "stylesheet" href = "CSS/style.css">
        <script type = "text/javascript" src = "scripts/java.js"></script>
        <script type = "text/javascript" src = "scripts/jquery.js"></script>
    </head>
    <body>
        <div id = "main">Click to Show and Hide <button id = "btnA">+</button></div>
        <div id = "box">Some content.</div>
        <script>
            $(document).ready(function()
            {
                $("#btnA").click(function()
                {
                    $("#box").slideToggle(2000);

                    // code block in question
                    if  (val == "+")
                    {
                        $(this).html("-");
                    }
                    else if  (val == "-")
                    {
                        $(this).html("+");
                    }
                });
            });
        </script>
    </body>
</html>

我希望将code block in question转换为可重用的函数，如下所示：

function toggleContent(target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        $(this).html(contentB);
    }
    else if (val == contentB)
    {
        $(this).html(contentA);
    }
}

但是，当我打电话给toggleContent("#btnA", "+", "-");时，它不起作用。有人可以指出我的错误吗？ TIA。

到目前为止，即使DEMO所建议的更改也不起作用。有人可以帮忙吗？

Answer 1

Arkadiusz G 的评论可能会为您提供答案。

更改

function toggleContent(target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        $(this).html(contentB);
    }
    else if (val == contentB)
    {
        $(this).html(contentA);
    }
}

收件人

function toggleContent(target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        $(target).html(contentB);
    }
    else if (val == contentB)
    {
        $(target).html(contentA);
    }
}

更新

还要添加

$(function(e){
$('body').on('click','#btnA','',function(){
   toggleContent("#btnA", "+", "-");
});

});

DEMO HERE

Answer 2

在函数“ toggleContent”中，“ this”对象不是您所想的，请尝试以下方式：

function toggleContent(target, contentA, contentB)
    {
        var val = $(target).html();
        if  (val == contentA)
        {
            $(target).html(contentB);
        }
        else if (val == contentB)
        {
            $(target).html(contentA);
        }
    }

Answer 3

嗨，如果您想将其转换为函数，请将currentObj也传递给该函数。

function toggleContent(currentObj,target, contentA, contentB)
{
    var val = $(target).html();
    if  (val == contentA)
    {
        currentObj.html(contentB);
    }
    else if (val == contentB)
    {
        currentObj.html(contentA);
    }
} 
toggleContent($(this), $("#btnA"), "contentA", "contentB")

jQuery函数参数无法正常工作

3 个答案: