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

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

Answer 1

问题是点击处理程序中使用的选择器$('.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();
    });
};

Answer 2

切换所需的div是单击锚点的前一个兄弟。您只需将.prev()与点击的元素上下文this一起使用即可定位：

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

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

2 个答案: