如何在使用 jsrender 脚本时只切换被点击的元素？

Question

这是我的HTML代码：

<li>
    <div class="search-res-title clearfix">
          <h3> <a href="food-details.html?item={{>_source.name}}" > {{>_source.name}}</a> </h3> <span><i class="badge">{{>_source.items.length}}</i>Places</span> 
          </div>

        <ul class="sr-itemlist">
        {{for _source.items}}
                <li> <a href="restaurant-page.html?restaurant={{>hotelDetails.key}}" > {{>hotelDetails.name}}</a> <i class="badge">{{>hotelDetails.misc.rating}}</i> </li>
        {{if #index ==2}}
         </ul>
        <div class="item-serh-more test{{:#index}} extra-list clearfix" >
            <ul class="sr-itemlist">
        {{/if}}
        {{/for}}
            </ul>
        {{if _source.items.length >=2 }}
        </div>
        {{/if}}
        <a href="#" class="loc-showbtn" refVal="{{:#index}}">more<span class="caret"></span></a>
    </li>
</script>

现在，这是我的 jQuery 代码

var showMore = function () {
 $('body').on('click', '.loc-showbtn', function () {
  $('.item-serh-more').toggle();
    });
  };

我想要的是： 当我单击 ".loc-showbtn" 时，我希望打开单个元素。

现在发生的是： 当我单击 ".loc-showbtn" 时，带有 class " $('.item-serh-more').toggle();" 的整个元素都会打开。

我尝试将 jsrender 循环的索引号提供给 class ".item-serh-more"。但它似乎不起作用。

Answer 1

问题出在点击处理程序中使用的选择器 $('.item-serh-more')，它选择了带有 class item-serh-more 的所有元素，但您需要的是 item-serh-more 元素，它是被点击的 loc-showbtn 元素的前一个兄弟元素。

var showMore = function () {
    $('body').on('click', '.loc-showbtn', function () {
        $(this).prev('.item-serh-more').toggle();
    });
};

Answer 2

切换所需的 div 是单击锚点的前一个同级。您可以简单地使用 .prev() 和点击元素上下文 this 来定位它：

$('body').on('click', '.loc-showbtn', function () {
  $(this).prev().toggle(); 
});

如何在使用 jsrender 脚本时只切换被点击的元素？

How to toggle only the clicked element while using jsrender scripts?

html

jquery

jsrender