如何将指向JavaScript的链接更改为自动运行

How to change a link pointing to JavaScript to run automatically?

本文关键字：运行 链接 JavaScript      更新时间：2023-09-26

如果我有JavaScript函数，当我点击链接时，它只被调用。

我如何自动运行JavaScript？

请注意，我尝试了很多方法，但都不起作用。

代码为：

<div align="left"><a href="javascript:show_desc(document.getElementById('d_<?php echo $item->id;?>'));" class="tablchet" ><?php echo $item->name;?></span></a></div>

为了正确地分离表示（HTML）和行为（JS），我们不会在HTML标记中包含任何JS。我们也不会在标签类型和JS函数之间创建依赖关系，所以我们的代码将是

<div align="left">
    <a href="" data-id="<?php echo $item->id; ?>" class="tablchet">
        <span><?php echo $item->name; ?></span>
    </a>
</div>

甚至是下面的

<div align="left">
    <span data-id="<?php echo $item->id; ?>" class="tablchet"><?php echo $item->name; ?></span>
</div>

对于演示来说，这是可以的。现在，使用一些JS到一个单独的文件中，该文件包含在带有<script src="behavior.js"></script>的演示HTML之后，或者直接到<script></script>之间的HTML文档中。

JS可以如下：

// Create a function allow you to manipulate the item clicked and the item targeted (with the id).
var showDesc = function (sender, target) {
    // When the sender is clicked...
    sender.addEventListener("click", function (e) {
        e.preventDefault();
        // Do Something with the target...
        console.log(target);
    });
};
// This part will be executed when all HTML presentation from server will be parse.
document.addEventListener("load", function () {
    // Our sender is our `class="tablchet"` markup.
    var sender = document.getElementsByClassName("tablchet")[0],
        // create the id name with the `data-id` information.
        id = "d_" + sender.getAttribute("data-id"),
        // and our target is finded with its id.
        target = document.getElementById(id);
    // Use our showDesc with sender and target wished.
    showDesc(sender, target);
});

在页面上运行javascript的方式是使用script标记。

您的示例如下：

<script type="text/javascript">
    show_desc(document.getElementById('d_<?php echo $item->id;?>'));
</script>

好吧，你是document.getElementById，所以，有一点很清楚，你想在加载完完整页面后调用方法，因为你在DOM准备好后得到元素。

使用JavaScript，您可以这样做。

window.onload = function() {
    var show_desc = function(htmlEle) {
        // do further processing.
    }
    var eleId = 'd_<?php echo $item->id;?>';
    var htmlEle = document.getElementById(eleId);
    show_desc(htmlEle);
}

如果您使用的是jQuerylib，那么您可以这样做。

$(document).ready(function() {

    var show_desc = function(htmlEle) {
        // do further processing.
    }
    var eleId = 'd_<?php echo $item->id;?>';
    var htmlEle = $("#eleId");
    show_desc(htmlEle);
})
相关文章：