Вопросы Теги

Как отображать данные по одной кнопке списка при каждом нажатии кнопки

Два способа обработки ошибок,

  1. Нет обработки ошибок для запросов JSONP междоменного домена. Используйте jsonp-плагин, доступный в Github https://github.com/jaubourg/jquery-jsonp , который обеспечивает поддержку обработки ошибок.
  2. jQuery ajax Тайм-аут - Тайм-аут после разумного количество времени, которое должно было вызвать обратный вызов ошибки, поскольку он мог провалиться молча. Возможно, вы не знаете, какова фактическая ошибка (или состояние ошибки), но по крайней мере вы можете обработать ошибку

1
задан Scoots 22 February 2019 в 13:04
поделиться

3 ответа

Я предлагаю использовать $(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>

0
ответ дан joy 22 February 2019 в 13:04
поделиться

Вы можете использовать .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>

0
ответ дан ellipsis 22 February 2019 в 13:04
поделиться

Вы должны использовать $(this) и .next(), поэтому вы должны получить доступ к нажатому элементу. 

$(document).ready(function(){
  $(".item-btn").click(function(){
    $(this).next(".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>

0
ответ дан dgknca 22 February 2019 в 13:04
поделиться
Другие вопросы по тегам:

Похожие вопросы: