使用条件javascript隐藏整个div(缺少化身图像)

使用条件javascript隐藏整个div(缺少化身图像),javascript,css,Javascript,Css,我目前正在使用CSS隐藏一个类,如果图像“src”使用的是空白的化身图像 但是,我还需要创建一个条件,当上述条件成立时,该条件将隐藏整个div(class=“s-lib-featured-profile-container”) 我目前正在执行以下命令,但没有成功 <style> .s-lib-featured-profile-image [src="//libapps.s3.amazonaws.com/apps/common/images/profile.jpg"] { di

我目前正在使用CSS隐藏一个类,如果图像“src”使用的是空白的化身图像

但是,我还需要创建一个条件,当上述条件成立时,该条件将隐藏整个div(class=“s-lib-featured-profile-container”)

我目前正在执行以下命令,但没有成功

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

.s-lib-featured-profile-image[src=“//libapps.s3.amazonaws.com/apps/common/images/profile.jpg”]{
显示:无;
}

$(文档).ready(函数(){
if($)('.s-lib-featured-profile-image img[src=”https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg“]”)。长度){
log('hiding…');
$('.s-lib-featured-profile-container').hide();
}
});

最后,如果其中的图像src是:

对这个新手的任何帮助都将不胜感激

你试过

$('.s-lib-featured-profile-container').css("display", "none");

它没有.hide()短,但我在使.hide()一致工作时遇到了问题。

使用元素的onload事件:

<img onload="$(this).parents('.s-lib-featured-profile-container').hide()" ...>

我想这就是你需要的

从img中提取src,然后使用给定的url检查src。如果给定url,则隐藏div

工作小提琴


您可以尝试各种方法,其中最简单的方法是使用jQuery,另一种方法可能是使用AJAX,也许您可以使用CSS父选择器做一些事情

jQuery的一个例子如下(主要基于@Diodeus-jamesmacfarlane的答案)


我希望这可以帮助您

因此,如果我理解正确,您希望检查文件是否存在,并根据该隐藏/显示正确的元素Joeri。如果有人没有上传配置文件图像,则基本上隐藏
(这意味着/profile.jpg图像将显示在其位置)。您可以尝试在默认情况下隐藏它,并在图像上使用onload,例如
,这将确保它只显示何时可以加载图像。当我通过控制台进入img线路时,这会起作用。但是,我正在将自定义CSS/JS添加到现有系统中,无法逐行进行更改。我将如何将其应用于CSS/JS?更新了答案以包含“全面捕获”处理程序。
$('.s-lib-featured-profile-container').css("display", "none");
<img onload="$(this).parents('.s-lib-featured-profile-container').hide()" ...>
$('.s-lib-featured-profile-container img').load(function() {
   $(this).parents('.s-lib-featured-profile-container').hide();
});
$(() => {

  const src = $('img').attr('src');
  if (src === 'https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg'){
    $('.s-lib-featured-profile-container').hide();
  }

})
$(document).ready(function() {
var img_src = $('.s-lib-featured-profile-container  img').attr('src');
if( img_src == "https://libapps.s3.amazonaws.com/apps/common/images/profile.jpg" ) {
  $('.s-lib-featured-profile-container').hide();
}
});
<img src="myfile.png" onload="$(this).parents('.s-lib-featured-profile-container').show()" />
<img src="myfile.png" onerror="$(this).parents('.s-lib-featured-profile-container').hide()" />
function check_availability(url, id) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          //if 200 response show the div
          document.getElementById(id).style.display = 'block';
        }
        else {
          //if no 200 response hide the div
          document.getElementById(id).style.display = 'none';
        }
      };
      xhttp.open("GET", url, true);
      xhttp.send();
  }