Question

我有以下html，当用户选择租赁时，会出现其他表单字段：

<label for="hold_type">Leasehold / Freehold: </label>
<select id="hold_type" name="hold_type">
  <option value="null">--</option>
  <option value="lease">Leasehold</option>
  <option value="free">Freehold</option>
</select>
<span class="required">*</span>

<div class="section_hidden">
    <label for="lease_remaining">Years remaining on lease: </label>
    <input type="text" id="lease_remaining" name="lease_remaining" value="<?php if(isset($_SESSION['enquiryData']['lease_remaining'])); ?>" />
    <span class="required">*</span>
</div>

我试图使用和改编的jQuery是：

$(document).ready(function() {
    $(".section_hidden").css("display", "none");
    $("select#hold_type").change(function() {
        if ($('select#hold_type option:selected').val() == "lease") {
            $('.section_hidden').fadeIn("fast");
            $('.section_hidden').css("display", "block");
            $.cookie('holdSection', 'expanded');
        } else {
            $(".section_hidden").fadeOut("fast"); //Slide Down Effect
            $(".section_hidden").css("display", "none");
            $.cookie('holdSection', 'collapsed');
        }
    });
});

页面上有一个section_hidden个div，因此用户选择只应显示低于它的div.section_hidden容器而不是整个页面。我尝试了closest()，find()和next()的组合，但未能获得所需的结果。

Answer 1

您应该使用包装元素：

<div class="wrapper">
    <label for="hold_type">Leasehold / Freehold: </label>
    <select id="hold_type" name="hold_type">
      <option value="null">--</option>
      <option value="lease">Leasehold</option>
      <option value="free">Freehold</option>
    </select>
    <span class="required">*</span>

    <div class="section_hidden">
        <label for="lease_remaining">Years remaining on lease: </label>
        <input type="text" id="lease_remaining" name="lease_remaining" value="<?php if(isset($_SESSION['enquiryData']['lease_remaining'])); ?>" />
        <span class="required">*</span>
    </div>
</div>

和javascript：

$(document).ready(function() {
    $(".section_hidden").hide(0);

    $("select#hold_type").change(function() {
        var $section_hidden = $(".section_hidden", $(this).closest(".wrapper"));
        if ($('select#hold_type option:selected').val() == "lease") {
            $section_hidden.fadeIn("fast");
            $.cookie('holdSection', 'expanded');
        } else {
            $section_hidden.fadeOut("fast"); //Slide Down Effect
            $.cookie('holdSection', 'collapsed');
        }
    });
});

Answer 2

你可以使用id

<div id="section_hidden1">

$("#section_hidden1").css("display", "none");

Answer 3

$(this).next('.section_hidden')不起作用？

Answer 4

假设#hold_type和.section_hidden共享一个共同的父级，并且公共父级中只有一个.section_hidden，这应该会为您提供正确的元素：

$(this).closest(".commonParent").find(".section_hidden");

根据下拉选择隐藏当前容器

4 个答案: