需要添加2周的div

Question

我需要添加此fiddle

2周以上的div當我添加它，它不工作..它顯示下面的文字和evrything是錯誤的。你知道如何添加2點更多的選擇

$(document).ready(function() { 
    $('#div1,#div2').hide(); 
    $('#id_radio1').click(function() { 
     $('#div2').hide('fast'); 
     $('#div1').show('fast'); 
    }); 
    $('#id_radio2').click(function() { 
     $('#div1').hide('fast'); 
     $('#div2').show('fast'); 
    }); 
}); 

Answer 1

使用屬性選擇器試試這個簡單的代碼，

JQUERY：

$(document).ready(function() { 
    $('[id^=div]').hide(); 
    $('[id^=id_radio]').click(function() { 
     $('[id^=div]').hide('fast'); 
     $('#div' + this.id.slice(-1)).show('fast'); 
    }); 
}); 

HTML：

<center> 
    <h2>show hide div on click using jquery</h2> 
    <div style="padding:25px;width: 100px;"> 
     <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1 
     <br /> 
     <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2 
     <br /> 
     <input id="id_radio3" type="radio" name="name_radio1" value="value_radio2" />Radio3 
     <br /> 
     <input id="id_radio4" type="radio" name="name_radio1" value="value_radio2" />Radio4 
    </div> 
    <div align="center" style="padding:25px;width: 300px;"> 
     <div id="div1">This is First (1st) division</div> 
     <div id="div2">This is Second (2nd) division</div> 
     <div id="div3">This is Second (3rd) division</div> 
     <div id="div4">This is Second (4th) division</div> 
    </div> 
</center> 

Fiddle Demo

Answer 2

/** HTML代碼我加了兩個div。但是，我把所有的div在DIV **/

<center> 
      <h2>show hide div on click using jquery</h2> 
       <div style="padding:25px;width: 100px;"> 
        <input id="id_radio1" type="radio" name="name_radio1" value="value_radio1" />Radio1 
        <br /> 
        <input id="id_radio2" type="radio" name="name_radio1" value="value_radio2" />Radio2 
       </div> 
       <div align="center" style="padding:25px;width: 300px;"> 
        <div class="divClass"> 
        <div id="div1">This is First (1st) division</div> 
        <div id="div2">This is Second (2nd) division</div> 
         <div id="div3">This is third (3rd) division</div> 
         <div id="div4">This is fourth (4th) division</div> 
         </div> 
       </div> 
    </center> 

/**一些修改jQuery的**/

$(document).ready(function() { 
     $('.divClass div').hide(); 
        $('#id_radio1').click(function() { 
         $('.divClass div').hide('fast'); 
         $('#div1').show('fast'); 
         $('#div3').show('fast'); 
       }); 
       $('#id_radio2').click(function() { 
         $('.divClass div').hide('fast'); 
         $('#div2').show('fast'); 
         $('#div4').show('fast'); 
       }); 
}); 

Answer 3

在這裏，我已經修改了你的代碼，使用類，而不是ID的單選按鈕的數量無限。希望這有助於：

FIDDLE：http://jsfiddle.net/94mW8/24/

使用：

1：給一個唯一的ID輸入收音機。

2：創建一個元素，讓我們說屬性爲data-id的div，並在輸入收音機中使用相同的值。

3：使用CSS隱藏這個元素的data-id屬性，它應該彈出當你點擊單選按鈕。