javascript - 你如何将 JavaScript onclick 事件设置为带有 css 的类

Question

假设我希望每次用户单击任何链接时都会弹出一个提示“hohoho”。 我是否需要将 onclick="alert('hohoho')" 添加到每个链接，或者我可以使用 CSS 设置它以便它适用于每个链接吗？

Answer 1

你不能只用 CSS 做到这一点，但你可以用 Javascript 和(可选)jQuery 做到这一点。 .

如果你想在没有 jQuery 的情况下这样做:

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                alert('ho ho ho');
            }
        }
    }
</script>

并且不使用 jQuery 并且仅在特定类上执行此操作(例如:hohoho):

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('a');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            if(/\bhohoho\b/).match(anchor.className)) {
                anchor.onclick = function() {
                    alert('ho ho ho');
                }
            }
        }
    }
</script>

如果您可以使用 jQuery ，那么你可以对所有 anchor 执行此操作:

<script>
    $(document).ready(function() {
        $('a').click(function() {
            alert('ho ho ho');
        });
    });
</script>

这个 jQuery 代码段只将它应用于具有特定类的 anchor :

<script>
    $(document).ready(function() {
        $('a.hohoho').click(function() {
            alert('ho ho ho');
        });
    });
</script>