Question

我的目标是创建一个可以在页面上的不同点调用的函数，以使某些<p>元素消失并重新出现。观众可以点击段落中的关键词来显示它下面的元素。

我在另一个代码块中做了类似的事情，但它要求我每次使用它时都要创建一个新函数。我可能有15-20次需要在一页上调用它。

以下是我编写的代码。我正在使用“状态”来确保处理器进入我的循环。我有一些Java经验，但我不是超级知识，所以我需要这样的小东西。

这很有效，但只有一次。因为我必须将变量“hidden”设置为我想要的对象的特定id，所以它使它成为一种用途。那意味着我需要多种功能。我想将id的名称作为参数传递给函数，以便可以为不同的对象调用该函数。

<!doctype html>
<html>
<head>

    <style>

    a {color: red; }

    </style>

</head>  

<body>

<p id="currentState">Not set yet</p>

<p>Within this paragraph, <a onclick="myFunction()">THIS</a> is what you click.</p>

<p id="hidden1">This is supposed to be hidden</p>



<script>
    var state;

    function myFunction() {

        var hidden = document.getElementById("hidden1");

        if (hidden.style.display != "none"){
            hidden.style.display = "none";
            state = "State: Visible";
        }

        else if (hidden.style.display == "none"){
            hidden.style.display = "block";
            state = "State: Hidden";
        }

        document.getElementById("currentState").innerHTML = state;
    } 
</script>

</body>
</html>

以下是我一直在努力解决的问题，但似乎没有任何效果。我不确定它是否因为getElementById（）不能将我的变量识别为字符串或者我没有正确地声明参数。

<!doctype html>
<html>
<head>

    <style>

    a {color: red; }

    </style>

</head>  

<body>

<p id="currentState">Not set yet</p>

<p>Within this paragraph, <a onclick="myFunction("hidden1")">THIS</a> is what you click.</p>

<p id="hidden1">This is supposed to be hidden</p>



<script>

    var state;

    function myFunction(name) {

        var hidden = document.getElementById(name);

        if (hidden.style.display != "none"){
            hidden.style.display = "none";
            state = "State: Visible";

        }

        else if (hidden.style.display == "none"){
            hidden.style.display = "block";
            state = "State: Hidden";

        }


        document.getElementById("currentState").innerHTML = state;



    }

</script>

</body>
</html>

我觉得这一行有些不对劲： <a onclick="myFunction("hidden1")">THIS</a> 这似乎是我的程序说我有语法错误。我不确定那是什么。非常感谢任何帮助！

Answer 1

<a onclick="myFunction("hidden1")">

第一个"启动HTML属性的值。

第二个"结束HTML属性的值。

如果您希望在使用"分隔的属性中使用"作为数据，则必须使用"等实体。

或者，切换到使用'。

更好的是，bind your event handlers using JavaScript。这将是separate your markup from your logic并将您从the weirdness that is intrinsic event attributes的某些内容中保存下来。

Answer 2

以下是使用jQuery的答案：

在你的HTML中：

... <a href="#" class="hiddenTrigger" data-target="hidden1">THIS</a> ...

... <p id="hidden1"> ...

在您的JavaScript中：

$('.hiddenTrigger').click(function () {
    var target = $(this).data('target');
    $('#'+target).show();
});

如何通过此java脚本函数传递字符串变量，然后传入getElementById（）？

2 个答案: