jQuery：將div css從display：none更改爲：display block：block not working

我正在根據複選框值更改div的內容。除了一個複選框選項，div的值是簡單的文本。在例外情況下，div的值是另一個div（可以說childDiv）。jQuery：將div css從display：none更改爲：display block：block not working

所以我改變了childDiv的可見性（display: none通過jQuery.css()）被點擊其他兩個選項時，並點擊例外選項時，將其更改爲display: block。

當我更改複選框選項時，childDiv變爲隱藏。但是，當我希望它可見時它不會再顯示。

的小提琴是在這裏：http://jsfiddle.net/sandeepy02/jLgyp/

的代碼是

  <div class="switch switch-three candy blue" id="reachout"> 
       <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/> 
        <label for="tab-41">Experience</label> 
       <input name="reachout" type="radio" id="tab-42" value="2"/> 
        <label for="tab-42">Contact Us</label> 
       <input name="reachout" type="radio" id="tab-43" value="3"/> 
        <label for="tab-43">Why?</label> 
       <div id="test1234"> 
        <div id="test12345"> 
         Option Start 
        </div> 
       </div> 
       <span class="slide-button"></span> 
      </div>

和

 jQuery("input[name='reachout']",jQuery('#reachout')).change(
     function(e) 
     {     
      if(jQuery(this).val()=="1") 
      { 
       jQuery("#test1234").html(""); 
       jQuery("#test12345").css("display","block"); 
      } 
      if(jQuery(this).val()=="2") 
      { 
       jQuery("#test1234").html("Option 2"); 
       jQuery("#test12345").css("display","none"); 
      } 
      if(jQuery(this).val()=="3") 
      { 
       jQuery("#test1234").html("Option 3"); 
       jQuery("#test12345").css("display","none"); 
      } 
     });

我甚至嘗試

  jQuery("#test12345").css('position', 'absolute'); 
      jQuery("#test12345").css('z-index', 3000);

後0，但沒有奏效。

感謝

來源

2013-04-03 user1517108

你可以嘗試顯示（）也股利？也許這將起作用，因爲原始的div被顯示隱藏：不。例如：jQuery（「＃test12345」）.css（「display」，「block」）。show（）; – andrew

@andrew試了一下。仍然沒有工作。 – user1517108

爲了讓您的代碼更加簡潔，您可以嘗試使用case/switch而不是多個if語句;） – Terry

當您設定爲父母的HTML，所以你要顯示一個div那不是有你覆蓋股利。

來源

2013-04-03 05:55:49 Musa

只是在jquery的一個變化！

jQuery("input[name='reachout']",jQuery('#reachout')).change(
       function(e) 
       {     
        if(jQuery(this).val()=="1") 
        { 
      --> change in this line   jQuery("#test1234").html("Option Start"); 
         jQuery("#test12345").css('position', 'absolute'); 
         jQuery("#test12345").css("display","block"); 
         jQuery("#test12345").css('z-index', 3000); 
        } 
        if(jQuery(this).val()=="2") 
        { 
         jQuery("#test1234").html("Option 2"); 
         jQuery("#test12345").hide(); 
        } 
        if(jQuery(this).val()=="3") 
        { 
         jQuery("#test1234").html("Option 3"); 
         jQuery("#test12345").hide(); 
        } 
       });

來源

2013-04-03 05:57:50

基於安德魯的評論，我決定把div分開而不是父母孩子。

此後，它可以正常工作，因爲我的願望。

代碼的變化是：

<div class="switch switch-three candy blue" id="reachout"> 
         <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/> 
          <label for="tab-41">Experience</label> 
         <input name="reachout" type="radio" id="tab-42" value="2"/> 
          <label for="tab-42">Contact Us</label> 
         <input name="reachout" type="radio" id="tab-43" value="3"/> 
          <label for="tab-43">Why?</label> 
         <div id="test1234"> 
         </div> 
          <div id="test12345"> 
           Option Start 
          </div> 
         <span class="slide-button"></span> 
        </div>

和

  jQuery("input[name='reachout']",jQuery('#reachout')).change(
      function(e) 
      {     
       if(jQuery(this).val()=="1") 
       { 
        jQuery("#test1234").hide(); 
        jQuery("#test12345").show(); 
       } 
       if(jQuery(this).val()=="2") 
       { 
        jQuery("#test1234").html("Option 2"); 
        jQuery("#test1234").show(); 
        jQuery("#test12345").hide(); 
       } 
       if(jQuery(this).val()=="3") 
       { 
        jQuery("#test1234").html("Option 3"); 
        jQuery("#test1234").show(); 
        jQuery("#test12345").hide(); 
       } 
      });

來源

2013-04-03 05:58:53 user1517108

是您的標識是否正確？

jQuery("#test1234").html(""); 
jQuery("#test12345").css("display","block")

來源

2013-04-03 06:01:43 John

yup ...我也粘貼了html – user1517108

見你有什麼問題：

這jQuery("#test1234")是jQuery("#test12345")的父母和你正在做的是改寫它與這行代碼的HTML：

jQuery("#test1234").html(""); 
jQuery("#test1234").html("Option 2"); 
jQuery("#test1234").html("Option 3");

參見前這個腳本的執行HTML是這樣的：

  <div id="test1234"> 
       <div id="test12345"> 
        Option Start 
       </div> 
      </div>

現在，當你的腳本被執行，然後它看起來像這樣：

本jQuery("#test1234").html("");輸出是這樣的：

  <div id="test1234"> 

      </div>

本jQuery("#test1234").html("Option 2");輸出是這樣的：

  <div id="test1234"> 
       Option 2 
      </div>

，並通過這個jQuery("#test1234").html("Option 2");輸出是這樣的：

  <div id="test1234"> 
       Option 3 
      </div>

所以你在做display : block一個在腳本執行後不存在於dom中的元素。

來源

2013-04-03 06:05:58 Jai

只需使用如下

// xxx is your div id 
$('#xxx').hide(); 
$('#xxx').show();

它會正常工作。

來源

2013-04-03 06:10:08

我已經重新配置了您的代碼，並提供了一些現在應該可以使用的建議。

http://jsfiddle.net/jquery4u/nPMvV/

(function ($) { 

    $("input[name='reachout']").on('change', function (e) { 
     var checkVal = $(this).val(); 
     console.log(checkVal); 

     //cache elements which are used often 
     var $test1234 = $("#test1234"), 
      $test12345 = $("#test12345"); 

     //use a switch statement instead of long winded if else 
     switch (checkVal) { 
      case "1": 
       $test1234.html("Option 1"); 
       $test12345.show(); 
       break; 
      case "2": 
       $test1234.html("Option 2"); 
       $test12345.hide(); 
       break; 
      case "3": 
       $test1234.html("Option 2"); 
       $test12345.hide(); 
       break; 

     } 
    }); 
})(jQuery);

來源

2013-04-03 06:15:08

jQuery：將div css從display：none更改爲：display block：block not working

回答

相關問題