javascript - 隐藏 sibling 选择

Question

我有这段代码:

    var addclass = 'color';
    var $cols = $('.oslist').click(function(e) {
        $cols.removeClass(addclass);
        $(this).addClass(addclass);
        $(this).css('opacity', '1.0');
        $(this).siblings().css('opacity', '0.2');
        $(this).siblings('select').css('display', 'block');
    });

    .oslist {
        opacity:0.2;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
      <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="1">
        <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
        <br/>
        <select style="display:none;border:0px;background-color:green" class="mybtn1">
          <option value="ubuntu16">Ubuntu 16</option>
          <option value="ubuntu17">Ubuntu 17</option>
        </select>
      </div>

      <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="2">
        <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
        <br/>
        <select style="display:none;border:0px;background-color:green" class="mybtn1">
          <option value="centos69">CentOS  6.9</option>
          <option value="centos71">CentOS  7.1</option>
        </select>
      </div>
      <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="3">
        <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px"/>
        <br/>
        <select style="display:none;border:0px;background-color:green" class="mybtn1">
          <option value="ubuntu16">Ubuntu 16</option>
          <option value="ubuntu17">Ubuntu 17</option>
        </select>
      </div>

    </div>


<div id="installtype" class="col-md-12">
<div id="manual" style="display:none;background-color:gray;color:#fff" class="col-md-5"><input type="radio" name="osinstallation_type" /><b>Manual/ISO</b><br/>ISO will be mounted.
</div>

<div id="automatic" style="display:none;background-color:gray;color:#fff" class="col-md-5"><input type="radio" name="osinstallation_type" /><b>Automatic</b><br/>OS template will be installed.
</div>
</div>

我想要做的是，当我单击“onlist”div 时，它应该显示该特定 div 中的“选择”选项。

我怎样才能做到这一点？任何帮助将不胜感激:)

附:- 如果所选选项是“ubuntu16”或“ubuntu17”，我想显示“span:手动”和“span:自动”。- 如果所选选项是“centos69”，我只想显示“span:自动”。

谢谢!

Answer 1

您可以通过在选定的 div 上添加一个类，然后添加 css 以在父 .oslist 具有该类时显示选择来实现此目的

.show_select.oslist select{
  display: inline-block !important;
}

我修改了var addclass = 'color show_select';

检查此代码:

var addclass = 'color show_select';
var $cols = $('.oslist').click(function(e) {
  $cols.removeClass(addclass);
  $(this).addClass(addclass);
    
  $(this).find("select").trigger("change");

  
  $(this).css('opacity', '1.0');
  $(this).siblings().css('opacity', '0.2');
  $(this).siblings('select').css('display', 'block');
});

$(".mybtn1").change(function(){
  var _val = $(this).val();
  if(_val=="ubuntu16" || _val=="ubuntu17"){
    $("#installtype span").show();
  }
  else{
    $("#installtype span").hide();
    $("#installtype #automatic").show();
  }
})

.oslist {
  opacity: 0.2;
}

.show_select.oslist select {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="1">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px" />
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="ubuntu16">Ubuntu 16</option>
      <option value="ubuntu17">Ubuntu 17</option>
    </select>
  </div>

  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="2">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px" />
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="centos69">CentOS  6.9</option>
      <option value="centos71">CentOS  7.1</option>
    </select>
  </div>
  <div style="text-align:center;border-radius:10px" class="col-md-3 oslist" tabindex="3">
    <img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" style="width:80px" />
    <br/>
    <select style="display:none;border:0px;background-color:green" class="mybtn1">
      <option value="ubuntu16">Ubuntu 16</option>
      <option value="ubuntu17">Ubuntu 17</option>
    </select>
  </div>

</div>

<div id="installtype">
  <span id="manual" style="display:none">Manual/ISO</span>
  <span id="automatic" style="display:none">Automatic</span>
</div>