Question

我正在尝试使用jQuery来切换div的类，以便将其突出显示为“已选中”。这些div通过以下代码中的循环呈现：

<template name="Watchlist">
<div class="wrapper">
    {{#each watchlist}}
        {{> WatchlistCompany}}
    {{/each}}
</div>

<template name="WatchlistCompany">
<div class="wrapper watchlist-company-item" id="{{_id}}">
    <div class="company-text">
        <div id="company-name">
            {{companyName}}
        </div>
    </div>
</div>

在“元素”选项卡中，我可以看到上面使用同时包含其他字段的文档的ID分配了ID。使用以下内容，我可以更改具有此特定ID的div的颜色，但不能更改其他ID。

Template.Watchlist.events({
'click .watchlist-company-item': function(e) {
    $('#8NAQWByZbHFwdFPJg').toggleClass('watchlist-selected');
}
});

.watchlist-selected {
  background-color: darkorange;
}

但是，这些div是动态呈现的，所以这没有帮助。我正在尝试复制上面的代码，但首先找到被点击的div的id，但我无法弄清楚我做错了什么。

首先，我尝试将id分配给变量。这不起作用（没有任何反应），即使它几乎与上面完全一样。

Template.Watchlist.events({
'click .watchlist-company-item': function(e) {
    var selectedId = "8NAQWByZbHFwdFPJg";
    $('#selectedId').toggleClass('watchlist-selected');
}
});

接下来，我尝试从点击的div中找到id，但这也不起作用（没有任何反应。

Template.Watchlist.events({
'click .watchlist-company-item': function(e) {
    var selectedId = event.currentTarget.id;
    $('#selectedId').toggleClass('watchlist-selected');
}
});

我很确定问题发生在event.currentTarget.id中，因为如果我只是将'#selectedId'更改为'div'，整个页面的颜色会发生变化。因此，找不到身份证的所有内容都是正确的。

谢谢。

Meteor和jquery - 通过id选择div来切换类

0 个答案: