0

Есть скрипт:

<?php
while ($result = mysqli_fetch_assoc($query)) {?>
    <div class="content">
       <div class="block-smallContainer" style="display: none;">
         <a href="#">
            <i class="far fa-trash-alt">
               <span>Удалить</span>
            </i>
         </a>
       </div>
    </div>
    <div class="footer">
        <a class="other-btn" href="#"><i class="fas fa-ellipsis-h other"></i></a>
    </div>
<?php
}?>

Как получить доступ к $(".content") по нажатию на $(".footer")?

Вот неправильный код (для демонстрации):

$(".content").on("click", function () {
    event.preventDefault();
    $(this).prev(".block-smallContainer").slideToggle(100);
})
1
  • Не сразу внимательно посмотрел на то, что вы хотите. Изменил свой ответ в соответствии с наикоротким и удобочитаемом обращении к элементу.
    – Bharatha
    Commented 21 мая 2018 в 9:27

3 ответа 3

3

$(".footer a").on("click", function(e) {
  e.preventDefault();
  $(this).closest('.footer').prev(".content").find('.block-smallContainer').slideToggle(100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="block-smallContainer" style="display: none;">
    <a href="#">
      <i class="far fa-trash-alt">
               <span>Удалить</span>
            </i>
    </a>
  </div>
</div>
<div class="footer">
  <a class="other-btn" href="#">ссылка в футере</a>
</div>

1

Используйте .prev(). Событие клика надо присваивать к элементу $(".footer"), и уже к нему применять .prev()

$(".footer").on("click", function() {
  event.preventDefault();
  $(this).prev().slideToggle(100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="block-smallContainer">
    <a href="#">
      <i class="far fa-trash-alt">
               <span>Удалить</span>
            </i>
    </a>
  </div>
</div>
<div class="footer">
  <a class="other-btn" href="#"><i class="fas fa-ellipsis-h other">
  Текст футера</i></a>
</div>

1

В соответствии с наикоротким и удобочитаемом обращением к элементу:

$(".footer").on("click", function () {
    event.preventDefault();
    $(this).prev().children().first().slideToggle(100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="block-smallContainer" style="display: none;">
    <a href="#">
      <i class="far fa-trash-alt">
               <span>Удалить</span>
            </i>
    </a>
  </div>
</div>
<div class="footer">
  <a class="other-btn" href="#">ссылка внизу</a>
</div>

Справка:

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.