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

Справка:

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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