-1

私はhtml構造に従っています：

 <div id="options">
    <input type="radio" id="option0" value="option0" checked='checked' /><label>All</label>
    <input type="radio" id="option1" value="option1" /><label>Option 1</label>
    <input type="radio" id="option2" value="option2" /><label>Option 2</label>
    <input type="radio" id="option3" value="option3" /><label>Option 3</label>
 </div>

 <p id="sentence1">This is an example of sentence 1</p>
 <p id="sentence2">This is an example of sentence 2</p>
 <p id="sentence3">This is an example of sentence 3</p>

「すべて」オプションをオンにするとすべての文を表示し、「オプション 1」をオンにすると #sentence1 を表示したい..など。

どんな助けでも大歓迎です。

ありがとう！リフキ

4

1 に答える 1

0

これを試して ：

<div id="options">
    <input type="radio" id="option0" value="option0" name="options" checked='checked' /><label>All</label>
    <input type="radio" id="option1" value="option1" name="options" /><label>Option 1</label>
    <input type="radio" id="option2" value="option2" name="options" /><label>Option 2</label>
    <input type="radio" id="option3" value="option3" name="options" /><label>Option 3</label>
 </div>

 <p id="sentence1">This is an example of sentence 1</p>
 <p id="sentence2">This is an example of sentence 2</p>
 <p id="sentence3">This is an example of sentence 3</p>

Jクエリ：

$(function(){
var allSentences = $("p[id^=sentence]");
$("INPUT[type=radio]").click(function(){

    var _this = $(this);
    if(_this.val()=="option0"){
           allSentences.show();
    }else{
        allSentences .hide();
        $("#"+_this.val().replace("option", "sentence")).show();
    }

});
});

このjsfiddleをチェックしてくださいhttp://jsfiddle.net/7u3uS/3/

于 2012-07-22T08:01:33.557 に答える