当其中一个子元素（img）具有特定属性时，如何隐藏 div？答案

【问题标题】：How to hide div when one of the child elements (img) has a specific property?当其中一个子元素（img）具有特定属性时，如何隐藏 div？
【发布时间】：2018-07-04 06:48:42
【问题描述】：

在我的网页中，我有一个标签和一个复选框。该复选框由 Salesforce 生成（因此 span id 看起来是动态的）。

这是我网页上的代码 sn-p。

<div class="fds" id="checkinput">
<label>Additional Review</label>
<span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

span 标记和基础img 由 Salesforce 生成。

我想知道如果 img 标签的标题（或 alt）为“未选中”，是否可以通过 jQuery 使“checkinput”div 不可见或隐藏。

有可能吗？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用attr() 方法来检查您的图像属性的值：

(function() {
  var img = $(".checkImg");
  if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
    $("#checkinput").hide();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

编辑如果您有几个 divs 及其图像，并且您想以相同的方式处理它们，请尝试以下操作：

(function() {
  $(".fds img").each(function() {
    var img = $(this);
    if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
      img.closest(".fds").hide();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput1">
  <label>Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked"/>
  </span>
</div>
<div class="fds" id="checkinput2">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c2">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

【讨论】：

当然可以。只需将$("#checkinput") 更改为$(".fds")。但是如果有其他同一个类的元素，它们都会隐藏。
有什么方法可以让 jquery 只为“fds”类的 div 中存在的元素运行上述代码？我问的原因是我不希望此代码 sn-p 在网页中存在且由 Salesforce 生成的其他复选框上运行。提前谢谢！！！

【解决方案2】：

使用find&attr方法获取img及其title属性，然后使用hide方法隐藏div

var titleConstant = "Not Checked";

var getImgTitle = $("#checkinput").find("img").attr('title');
if (getImgTitle === titleConstant) {
  $("#checkinput").hide()

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

【讨论】：

【解决方案3】：

使用 jQuery $("[],[]") OR syntax 根据这些属性进行选择。

    $( "[img[alt='Not Checked']], [img[title='Not Checked']]" ).each(function(img) {
      
      $(img).parent().parent().hide() // using parent relationship to hide

      // $(img).closest(".fds").hide() // alternative using class to hide
      // $("#checkinput").hide(); // alternative using id to hide
    })

【讨论】：