Question

<div class="checkbox"><input value="Yes" name="beta_interest" class="checkbox-input" id="beta_interest" type="checkbox"> <label for="beta_interest" class="checkbox-label icon-checkmark">Are you interested in joining program?</label></div>
<div class="checkbox"><input value="Yes" name="opt_in" class="checkbox-input" id="opt_in" type="checkbox"> <label for="opt_in" class="checkbox-label icon-checkmark">Yes, I’m interested in receiving announcements</label></div>

我需要根据某些下拉条件隐藏或显示第二个div。我该如何隐藏或显示？

Answer 1

这个问题措辞严厉，但你回答的是使用.hide()扩展名。只需使用$('elementIdentifier').hide();

即可

Answer 2

将其添加到div：

的样式属性中

style=display:none;

并显示div：

style=display:inline;

Answer 3

在下拉列表中使用更改功能，然后根据条件隐藏您的div。

$(document).ready(function() {
  $('#divChanger').change(function() {
    var value = $("#divChanger").val();
    if (value == 1) {
      $("#first").hide();
    }
    if (value == 2) {
      $("#second").hide();
    }
  })
})

<select id="divChanger">
  <option vlaue="">Select here</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<div id="first">
  <h1>
I am First Div
</h1>
</div>
<div id="second">
  <h1>
I am second div
</h1>
</div>
</div>
</div>

例如，这是fiddle。

隐藏HTML元素的div

3 个答案: