Question

我的网页上有以下几行代码：

<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: block;">Previous</button>

<button type="button" data-role="none" class="slick-next" aria-label="next" style="display: block;">Next</button>

上一个和下一个按钮通过一些外部文件 - slick放入网页，其中存储在另一台服务器上，并包含在<head>标记内。

我需要在每个按钮上放置两个单独的计数器，以供用户点击时使用。

由于我无法修改外部JavaScript文件，如何将以下代码添加到将执行计数器的其中一个按钮中？

onclick="myCounter()"

onclick="myCounterTwo()"

按钮应该类似于：

<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: block;" onclick="myCounter()">Previous</button>

<button type="button" data-role="none" class="slick-next" aria-label="next" style="display: block;" onclick="myCounterTwo()">Next</button>

Answer 1

我假设你可以使用jQuery，因为它是你的标签之一：

你有充分的理由使用onclick属性吗？

使用函数on()（jQuery）

绑定事件会更好

前：

$(document).on('click', '.slick-next', myCounterTwo)

如果你不能编辑你的JS文件（如果你必须使用HTML，这很奇怪......）你仍然可以在你的按钮之后添加一个脚本标签......这很难看，但不如使用onclick属性。< / p>

Answer 2

您可以在 HTML 中执行此操作，如：

<button type="button" data-role="none" class="slick-prev" aria-label="previous" 
        style="display: block;" onclick="myCounter()">Previous</button>
<button type="button" data-role="none" class="slick-next" aria-label="next" 
        style="display: block;" onclick="myCounterTwo()">Next</button>

或者 jQuery 之类的：

$(".slick-prev").click(function () {
  myCounter();
});
$(".slick-next").click(function () {
  myCounterTwo();
});

在 JavaScript 中，如：

document.getElementsByClassName(".slick-prev")[0].click = myCounter;
document.getElementsByClassName(".slick-next")[0].click = myCounterTwo;

或委托： >

document.getElementsByClassName(".slick-prev")[0].addEventListener("click", myCounter, false);
document.getElementsByClassName(".slick-next")[0].addEventListener("click", myCounterTwo, false);

您可以使用可能的方法。

Answer 3

我认为你在jQuery环境中。因此，您可以为click事件添加自定义绑定！

如果您无法更改其他js文件，可以在标记中（即按钮后）将其添加为单独的脚本块。

<script>
$('.slick-prev').on('click', myCounter);

        function myCounter() {
           // your code
        }
</script>

Answer 4

$(document).ready(function(){
    $('#my-id').slick({
        prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="previous" onclick="prevCall()">Previous</button>',
        nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="next" onclick="nextCall()">Next</button>',
    }); 
});

通过JavaScript添加onclick事件

4 个答案: