如何在每次单击按钮时显示单个列表按钮数据

Question

如何显示每个按钮的点击事件的数据？

嗨，我有一个物品清单。在列表中有一个切换按钮，当我单击一个按钮时，将显示列表的所有数据。

我想显示一个项目数据。

更多信息，请查看此片段

$(document).ready(function(){
  $(".item-btn").click(function(){
    $(".item-price").toggle();
  });
});

li {
    list-style:none;
    background:#ddd;
    margin-bottom:30px;
    padding:5px;
}

.item-price {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-list">
    <ul class="lict-block">
        <li class="item">
            <div class="item-img"></div>
            <div class="item-content">
                <div class="item-btn">Show Price</div>
                <div class="item-price">
                    <h3>23.66</h3>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="item-img"></div>
            <div class="item-content">
                <div class="item-btn">Show Price</div>
                <div class="item-price">
                    <h3>23.66</h3>
                </div>
            </div>
        </li>
        <li class="item">
            <div class="item-img"></div>
            <div class="item-content">
                <div class="item-btn">Show Price</div>
                <div class="item-price">
                    <h3>23.66</h3>
                </div>
            </div>
        </li>
    </ul>
</div>

如何实现？

Answer 1

我建议使用$(this).parent().find('item-price')，因为当您的HTML代码位置更改为更好时，它也可以使用。

$(document).ready(function() {
  $(".item-btn").click(function() {
    $('.item-price').hide();
    $(this).parent().find('.item-price').toggle();
  });
});

li {
  list-style: none;
  background: #ddd;
  margin-bottom: 30px;
  padding: 5px;
}

.item-price {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="main-list">
  <ul class="lict-block">
    <li class="item">
      <div class="item-img"></div>
      <div class="item-content">
        <div class="item-btn">Show Price</div>
        <div class="item-price">
          <h3>23.66</h3>
        </div>
      </div>
    </li>
    <li class="item">
      <div class="item-img"></div>
      <div class="item-content">
        <div class="item-btn">Show Price</div>
        <div class="item-price">
          <h3>23.66</h3>
        </div>
      </div>
    </li>
    <li class="item">
      <div class="item-img"></div>
      <div class="item-content">
        <div class="item-btn">Show Price</div>
        <div class="item-price">
          <h3>23.66</h3>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 2

您应该使用console.log('fired')和getRecentPosts(categoryId: number, page: number = 1): Observable<any> { // Get posts by a category if a category id is passed let category_url = categoryId ? ("&categories=" + categoryId) : ""; return this.httpClient.get(this.baseRestApiUrl + "posts?page=" + page + category_url).pipe( map((res: any) => res), mergeMap((posts: Post[]) => { if (posts.length > 0) { return forkJoin( posts.map((post: Post) => { if (post.featured_media === 0) { post.media = new Media; return of(new Post(post)); } else { return this.httpClient.get(this.baseRestApiUrl + "media/" + post.featured_media).pipe( map((res: any) => { post.media = new Media(res); return new Post(post); }), catchError(val => of(val)) ); } }) ); } return empty(); }), catchError(val => of(val)) ); ，所以您必须访问被单击的元素。

$(this)

.next()

$(document).ready(function(){
  $(".item-btn").click(function(){
    $(this).next(".item-price").toggle();
  });
});

Answer 3

您可以使用.siblings()选择元素

$(document).ready(function() {
  $(".item-btn").click(function() {
    $(this).siblings('.item-price').toggle();
  });
});

li {
  list-style: none;
  background: #ddd;
  margin-bottom: 30px;
  padding: 5px;
}

.item-price {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="main-list">
  <ul class="lict-block">
    <li class="item">
      <div class="item-img"></div>
      <div class="item-content">
        <div class="item-btn">Show Price</div>
        <div class="item-price">
          <h3>23.66</h3>
        </div>
      </div>
    </li>
    <li class="item">
      <div class="item-img"></div>
      <div class="item-content">
        <div class="item-btn">Show Price</div>
        <div class="item-price">
          <h3>23.66</h3>
        </div>
      </div>
    </li>
    <li class="item">
      <div class="item-img"></div>
      <div class="item-content">
        <div class="item-btn">Show Price</div>
        <div class="item-price">
          <h3>23.66</h3>
        </div>
      </div>
    </li>
  </ul>
</div>