Question

我正在尝试获取对第n个标签的引用，并根据您单击的标签动态显示/隐藏所述内容。更容易展示我的第一个：

//Creating Tabs
<ul>
    <!-- ko foreach: ObjectToIterate -->
    <li><a data-bind="attr: { 'id': 'tab' + $index()}
    <!-- /ko -->
</ul>

//Content To Show Based On Selected Tab
<!-- ko foreach: ObjectToIterate -->
    <div class="hidden" data-bind="attr: { 'id': 'object' + $index()}"></div>  //All Hidden By Default (I can make the first one show later)
<!-- /ko -->

这一切都很好。我得到了两个列表，并为ObjectToIterate[]数组中的每个项目添加了一个唯一的ID。

我对Javascript / jQuery部分感到茫然。我正在尝试将选项卡上第n个元素的点击交互与要显示的第n个对象相关联。我知道如何使用静态id调用jQuery中的元素，但不是动态id。我也不知道如何将动态id点击与第n个对象联系起来。

我希望这是有道理的。我真的简化了代码以帮助它有意义。

Answer 1

您不需要使用jquery进行点击回调，使用knockout保持清洁：

DOM：

<!-- ko foreach: ObjectToIterate -->
    <li><a href="#" data-bind="attr: { 'id': 'tab' + $index() }, click: tabClicked"></a> </li>
<!-- /ko -->

视图模型：

var tabViewModel = {
     tabClicked: function(tab) { alert('Tab: ' + tab + ' clicked!'); };
};

参考第n个标签点击

1 个答案: