如何动态创建 Javascript/Jquery 事件？答案

【问题标题】：How to create Javascript/Jquery events dynamically?如何动态创建 Javascript/Jquery 事件？
【发布时间】：2019-01-25 01:41:45
【问题描述】：

我有 4 张引导卡，它们的 ID 是：卡0 卡1 卡2 卡3 我有 4 个标签标记，它们的 ID 是：标记0 标记1 标记2 标记3

我想在每张卡片中添加 4 个不同的事件：

for (var i = 0; i < 4; i++) {
  var cardx = '#card' + i;
  var markx = '#mark' + i;

  $(cardx).hover(function (i) {
    $(markx).removeClass('map-icon map-icon-beauty-salon');
    $(markx).addClass('map-icon map-icon-postal-code-prefix');
  }, function (i) {
    $(markx).removeClass('map-icon map-icon-postal-code-prefix');
    $(markx).addClass('map-icon map-icon-beauty-salon');
  });
}

上面的代码只在 4 张卡片中创建相同的事件

【问题讨论】：

你能发布你的html和css代码吗？

标签： javascript jquery foreach hover

【解决方案1】：

你需要使用each循环代替for

试试这个：

$(document).ready(function(){
    
    $('.cardHolder div').each(function (i) {
        var markx = '#mark' + i;
        $(this).hover(function() {
            $(markx).removeClass('map-icon map-icon-beauty-salon');
            $(markx).addClass('map-icon map-icon-postal-code-prefix');
        }, function () {
            $(markx).removeClass('map-icon map-icon-postal-code-prefix');
            $(markx).addClass('map-icon map-icon-beauty-salon');
        });
    })

});

label{display:block}
.map-icon-beauty-salon{
    color:#0094ff;
}
.map-icon-postal-code-prefix{
    color:#ff6a00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Hover mouse on Card : </p>
<div class="cardHolder">
    <div id="card0">Card 1</div>
    <div id="card1">Card 2</div>
    <div id="card2">Card 3</div>
    <div id="card3">Card 4</div>
</div>
<hr />

<label id="mark0">Mark 1</label>
<label id="mark1">Mark 2</label>
<label id="mark2">Mark 3</label>
<label id="mark3">Mark 4</label>

【讨论】：

这对我有用。我做了一点改动 $("div[id^='card']").each(function)

【解决方案2】：

它将为每个#card[i] 元素添加悬停事件。问题是#mark[i] 元素。由于关闭问题，它将始终作用于#mark3。您应该将 i 附加到事件并使用该值。

$(cards).on('mouseenter', {i: i}, function (e) {
  var markx = '#mark' + e.data.i;
  $(markx).removeClass('map-icon map-icon-beauty-salon');
  $(markx).addClass('map-icon map-icon-postal-code-prefix');
}).on('mouseleave', {i: i}, function (e) {
  var markx = '#mark' + e.data.i;
  $(markx).removeClass('map-icon map-icon-postal-code-prefix');
  $(markx).addClass('map-icon map-icon-beauty-salon');
});

【讨论】：