Использовать скрипт, чтобы скрыть весь div на основе условия CSS?

В настоящее время я использую CSS, чтобы скрыть класс, если изображение «src» использует пустое изображение аватара:

<style>
.s-lib-featured-profile-image [src = "//libapps.s3.amazonaws.com/apps/common/images/profile.jpg"] {
    display:none;
}
</style>

Однако мне также нужно создать условие (jQuery?, javascript?), которое будет скрывать весь div (class="s-lib-featured-profile-container"), когда приведенное выше верно.

 <div class = "s-lib-featured-profile-container">
        <a href = "/prf.php?account_id=127256">
            <div class = "s-lib-featured-profile-image">
                <img src = "https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt = "">
            </div>
            <div class = "s-lib-profile-div s-lib-featured-profile-name"></div> 
        </a>
    </div>

В настоящее время я безуспешно реализую приведенный ниже сценарий.

<script type = "text/javascript">
$(document).ready(function() {
 if ( $('.s-lib-featured-profile-image').text()=='' ) {
$('.s-lib-featured-profile-container').hide();
}
    });
</script>

javascript html css

22.03.2019 16:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

Почему бы вам не сделать тот же запрос, что и ваш CSS?

$(document).ready(function() {
 if ( $('.s-lib-featured-profile-image img[src = "https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg"]').length ) {
    console.info('hiding...');
    $('.s-lib-featured-profile-container').hide();
  }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "s-lib-featured-profile-container">
    <a href = "/prf.php?account_id=127256">
        <div class = "s-lib-featured-profile-image">
            <img src = "https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt = "">
        </div>
        <div class = "s-lib-profile-div s-lib-featured-profile-name"></div> 
    </a>
</div>

22.03.2019 17:04

Поскольку вы уже используете jQuery, быстрым решением будет использование .attr() (документы). Это может выглядеть примерно так:

if ($('.s-lib-featured-profile-image img').attr('src') === "//libapps.s3.amazonaws.com/apps/common/images/profile.jpg") {
  //your custom logic here
}

Если вам нужно скрыть весь div, попробуйте использовать что-то вроде .addClass()(документы), чтобы добавить класс со свойством CSS display: none.

22.03.2019 17:07

Вот простой фрагмент, показывающий, как вы могли бы действовать: выберите дочерний элемент при определенном условии, а затем скройте его родителя:

$('.hide-my-parent').each(function() {
  $(this).parent('.parent-class').hide();
})

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


<div class = "parent-class">
  hide me!
  <span class = "hide-my-parent">
    hide my parent!
  </span>
</div>

<div class = "parent-class">
  don't hide me!
  <span>
    don't hide my parent!
  </span>
</div>

И, конечно же, полный, менее читаемый код, который вы могли бы использовать:

const defaultUrl = 'https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg';

$(`.s-lib-featured-profile-image [src = "${defaultUrl}"]`)
  .parent('div')
  .parent('a')
  .parent('.s-lib-featured-profile-container')
  .hide()

/* just a helper to show that the div has been hidden */
.s-lib-featured-profile-container {
  border: solid;
}

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

<!-- will be hidden -->
<div class = "s-lib-featured-profile-container">
  <a href = "/prf.php?account_id=127256">
    <div class = "s-lib-featured-profile-image">
      <img src = "https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg" alt = "">
    </div>
    <div class = "s-lib-profile-div s-lib-featured-profile-name"></div>
  </a>
</div>

<!-- will not be hidden -->
<div class = "s-lib-featured-profile-container">
  <a href = "/prf.php?account_id=127256">
    <div class = "s-lib-featured-profile-image">
      <img src = "http://picsum.photos/100/100" alt = "">
    </div>
    <div class = "s-lib-profile-div s-lib-featured-profile-name"></div>
  </a>
</div>

22.03.2019 17:15

Другие вопросы по теме

Таблицы Google: как публиковать страницы в формате html на основе текущего дня

PHP-скрипт, нарушающий остальную часть HTML-документа

Excel VBA, чтобы щелкнуть элемент HTML из списка в таблице

Создайте веб-страницу React для локального использования

Упорядочить по дате внутри бритвы foreach

Граница тела css, мешает абсолютное позиционирование

Обертывание формы ASP внутри макета Bootstrap

Изменение типа файла (ввод HTML[type=file])

Форма Bootstrap контролирует выравнивание при изменении размера окна

Проверка самой большой высоты из динамически сгенерированных div

Использовать скрипт, чтобы скрыть весь div на основе условия CSS?

Ответы 3

Другие вопросы по теме

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