使用Javascript根据另一个类的存在隐藏一个类

Question

如果存在其他类，我一直试图通过Javascript隐藏类。为了更好地解释这种情况，我创建了一个小图像，描绘了<div>的情况。

这是我正在使用的代码：

if ($(“.tripdetails” .tripavailable”).length > 0){
document. getElementsByClassName(“.soldoutform”).style.display = “none”;
}

div情况：

<div class="tripdetails">
 <div class="tripavailable OR tripunavailable">
  <div class="soldoutform">
  </div>
 </div>
</div>

在“或”部分中，有第一类或第二类名称。如果它是第一个“可使用的”，则应隐藏“ soldoutform”类。

非常感谢您的答复，我非常感谢！ ：）

干杯！

Answer 1

您不需要JS。只需使用CSS即可：

.tripavailable > .soldoutform {
    display: none;
}

Answer 2

两个类名之间有一个多余的双引号字符。

请注意，如果两个类位于同一元素（而不是两个不同的元素，并且tripavailable元素位于tripdetails元素之内），那么您将不会在两个类名之间有一个空格。

if ( $(".tripdetails .tripavailable").length > 0){
  $(".soldoutform").hide();
}

---

还请注意，您发布的代码使用了有问题的引号字符，例如由文字处理器生成的引号字符。您可能已经知道这一点，但是值得一提–这种引号会破坏您的代码。

Answer 3

CSS将完成这项工作（您可以不显示任何内容或隐藏可见性）

.tripavailable .soldoutform {
   display: none;
   visibility: hidden;
}

如果您真的想使用jquery，则可以执行以下操作：

$(".tripavailable .soldoutform").hide();

或者使用您的原始代码，但删除多余的引号：

if ( $(".tripdetails .tripavailable").length > 0){
  $(".soldoutform").hide();
}

编辑：

如果班级在同一个DIV中，请按照以下说明删除空格：

CSS：

.tripavailable.soldoutform {
       display: none;
       visibility: hidden;
    }

JQUERY：

$(".tripavailable.soldoutform").hide();

您的原始查询：

if ( $(".tripdetails.tripavailable").length > 0){
  $(".soldoutform").hide();
}