如何在使用 jsrender 脚本时仅切换单击的元素？答案

【问题标题】：How to toggle only the clicked element while using jsrender scripts?如何在使用 jsrender 脚本时仅切换单击的元素？
【发布时间】：2015-02-05 08:22:52
【问题描述】：

这是我的 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" 时，所有带有类“$('.item-serh-more').toggle();"”的元素都会打开。

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

【问题讨论】：

您可以考虑使用更加数据驱动的方法，通过将数据绑定添加到 JsRender - 使用 JsViews，而不是使用 JsRender 然后进行 DOM 操作。这个样本可能会给你一些想法：jsviews.com/#samples/tag-controls/range。顺便说一句，{{range}} 标签也可以与 JsRender 一起使用：jsviews.com/#samples/jsr/tags/extend-for.

标签： jquery html jsrender

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：