Question

我是这段代码：

＆＃13;

    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');
    });

＆＃13;

    .oslist {
        opacity:0.2;
    }

＆＃13;

<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>

＆＃13;

我想要做的是，当我点击＆＃34; onlist＆＃34; div，它应该显示＆＃34; select＆＃34;特定div中的选项。

我怎样才能做到这一点？任何帮助将非常感谢:)

P.S： - 如果所选的选项是＆＃34; ubuntu16＆＃34;或者＆＃34; ubuntu17＆＃34;，我想展示＆＃34; span：manual＆＃34; ＆安培; ＆＃34; span：automatic＆＃34;。 - 如果所选的选项是＆＃34; centos69＆＃34;，我想显示＆＃34; span：automatic＆＃34;仅

谢谢！

Answer 1

你可以通过在选定的div上添加一个类然后添加css来显示选择，当父.oslist具有该类

时

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

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

检查此代码：

＆＃13;

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();
  }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试隐藏所有其他选择元素，然后显示特定元素：

$('.oslist').on('click', function() {
  // Get a reference of $(this),
  // so you dont have to call the jQuery constructor multiple times
  var that = $(this);

  // Hide all the other select elements
  $('.oslist').not(that).children('select').hide();

  // Show the specific one
  that.children('select').show();
});

<强>样本

$('.oslist').on('click', function() {
  // Get a reference of $(this),
  // so you dont have to call the jQuery constructor multiple times
  var that = $(this);

  // Hide all the other select elements
  $('.oslist').not(that).children('select').hide();

  // Show the specific one
  that.children('select').show();
});

<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>

隐藏兄弟姐妹选择

2 个答案: