Question

我有一些代码，我使用jQuery在循环中的特定项目上执行函数，因为它必须在页面上显示许多相同的内容。

最终我试图在点击锚标签时显示第二部分，并隐藏第一部分。然后我将颠倒第二部分内单击按钮的过程。

我们一直在使用jQuery之类的东西，比如.next（），。find（），。nearest（）和.prev（）来遍历element.target（click）来操纵特定容器而不影响任何其他容器在共享相同选择器的页面上。

所以，对于这段代码，到目前为止我遇到了错误，并且无法弄清楚这个代码的遍历难题。

        <ul data-bind="foreach: { data: FilteredThings, as: 'Thing' }">
            <li>
                <header>
                    <a class="focus-element-flag" data-bind="click: $parent.ShowSection1hideSection2">
                        <div>
                            <div></div>
                            <div>
                                <div></div>
                            </div>
                            <div>
                                <div><label></label></div>
                            </div>
                        </div>
                    </a>
                </header>
                <section id="section1" class="currently-shown">
                     //some content
                </section>
                <section id="section2" class="currently-hidden">
                    <div>
                        <button class="closeButton" data-bind="click: $parent.ShowSection1hideSection2">
                            <span>Close</span>
                        </button>
                    </div>
                    <table>
                       //some content
                    </table>
                </section>
            </li>
        </ul>

然后我有一个类似的功能：

vm.ShowSection1hideSection2 = function (Event) {
    $(Event.target).find(".currently-shown").css('display', 'none');
    $(Event.target).find(".currently-hidden").css('display', 'block');
}

现在我知道这个函数是不正确的，但它是我尝试使用.next（）,. find（），。siblings（）等的一个例子。

我将所有html标签留在了锚标签内，以显示可能存在多个“目标”，但看起来他们都在寻找使用jQuery的正确选择器，我很高兴。

任何人都有关于在我的函数中使用哪种jQuery组合的建议？先感谢您。我几个小时以来一直在研究和做一些追踪和错误。

Answer 1

由于你在使用Knockout，我的建议是利用击倒力并保持你的物品分开
示例：https://jsfiddle.net/9aLvd3uw/97/

 var MainViewModel = function() {
        var self = this;
        //Assuming this is your data
        var arrOfObj = [{name:'Name 1',value:'value 1'},
                        {name:'Name 2',value:'value 2'},
                        {name:'Name 3',value:'value 3'}];
        //For each obj you create a new instance of ItemViewModel 
       self.FilteredThings = ko.observableArray($.map(arrOfObj, function (item) {
         return new ItemViewModel(item);
        }));
    }
      var ItemViewModel = function(data) {
        var self = this;
        self.Name = ko.observable(data.name);
        self.Value = ko.observable(data.value);
        self.ShowSection1 = ko.observable(true);
        self.ShowSection2 = ko.observable(false);
        self.ShowSection1hideSection2 = function (){
          // here your logic to show or hide different section  
            self.ShowSection1(!self.ShowSection1());
            self.ShowSection2(!self.ShowSection2());
        }
    }
    ko.applyBindings(MainViewModel);

用于遍历的jQuery .find（）或.next（）？

1 个答案: