Как отображать данные по одной кнопке списка при каждом нажатии кнопки - PullRequest
Новая
       6

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

0 голосов
/ 22 февраля 2019

Как показать данные о каждом нажатии кнопки?

Привет, у меня есть список предметов.В списке есть кнопка, когда я нажимаю одну кнопку, отображаются все данные списка.

Я хочу показать данные одного элемента.

Дополнительная информация просмотреть этот фрагмент 

$(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>

Как этого добиться?

Ответы [ 3 ]

0 голосов
/ 22 февраля 2019

Вы можете использовать .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 голосов
/ 22 февраля 2019

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

Вы должны использовать $(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>
...