隱藏當前容器取決於下拉選擇

我有以下的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，因此用戶選擇應該只顯示低於它的容器，而不是整個頁面。我嘗試了closest(),find()和next()的組合，但沒有設法得到想要的結果。

來源

2011-08-07 lethalMango

你應該使用一個包裝元素：

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

來源

2011-08-07 23:50:49 Alex

可以使用ID

<div id="section_hidden1"> 

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

來源

2011-08-07 23:39:33 celoron

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

來源

2011-08-07 23:43:07 numbers1311407

不，因爲'$（this）.next（）'會返回'.required'範圍。由於該跨度不是'.section_hidden'，'$（this）.next（'。section_hidden'）'返回一個空的jQuery對象。 – gilly3

那麼，假設你的結構總是相同的，$（this）.next（）。next（）就可以工作。當然最好將相關元素包裝在一起，或給隱藏部分一個id。 – numbers1311407

假設#hold_type和.section_hidden有着共同的父母，有且只有一個.section_hidden在共同的父，這應該給你正確的元素：

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

來源

2011-08-07 23:47:09 gilly3

隱藏當前容器取決於下拉選擇

回答

相關問題