0

The problem I have with the below is that I'm working with a form that gets passed thru several different stages and the click function triggers the 'show'.

Is there a way to have the show triggered by a similar thing to onload?

so to explain the bigger picture here. I've got a form with a radio button to 'add an image'. stage 1 of the form is for the author. stage 2 of the form is for the content editor. so the form is completed and passed to the content editor. if the radio button is checked at stage 1 the div is shown. when this form is passed to stage 2 I need the div to still be shown. hope this explains my problem further.

stage 2 is a completely different page.

Sorry this is my first time on here!

Markup

<input type = radio id = "image1" name = "image1" > image 1 </input>
<input type = radio id = "image2" name = "image2" > image 2 </input>
<div id= "div-id1" style="display:none"> image 1</div>
<div id= "div-id2" style="display:none"> image 2</div>

JavaScript

$("#image1").click(function(){

    if ($("#image1").is(":checked")) {
      //show the hidden div
       $("#div-id1").show("slide");
    } 
    else {
      $("#div-id1").hide("slide");
    }
});

$("#image2").click(function(){
    if ($("#image2").is(":checked")) {
      //show the hidden div
      $("#div-id2").show("slide");
    } 
    else {
      $("#div-id2").hide("slide");
    }
});
4

3 に答える 3

0

hide()show()jQuery では、最初の引数として a を取りますduration。

slideDown()and関数はありslideUp()ますが、それはあなたが望むものではないと思います。

このフィドルをチェックしてください

新しいマークアップ

<input type="checkbox" id="image1" class="imageBox" name="image1" checked>image 1</input>
<input type="checkbox" id="image2" class="imageBox" name="image2">image 2</input>
<div id="image1Container" class="imageContainer" style="display:none">image 1</div>
<div id="image2Container" class="imageContainer" style="display:none">image 2</div>

対応コード

(function () {
    var showImgBlock = function (img, container) {
        (img.is(":checked")) ? container.show(500) : container.hide(300);
    };

    $(".imageBox").each(function () {
        item = this.id;
        showImgBlock($("#" + item), $("#" + item + "Container"));

    }).click(function () {
        item = this.id;
        showImgBlock($("#" + item), $("#" + item + "Container"));
    });;
})();

これで、チェック ボックスにクラス ( .imageBox) が追加されました。ドキュメントが読み込まれると、対応するコンテナーの名前がプルされる特定のチェック ボックスがチェック.imageBoxされます。iddiv

関数を作成することは有益だと思います。if/elseこれにより、同じブロックを何度も入力し続ける必要がなくなります。覚えておいてください、重複したコードは悪いです

また、プロジェクトの範囲外かどうかはわかりませんが、私のフィドルでは、その方法checkboxではなく、radio選択を解除することもできます。変更するか、維持するかはあなた次第です。

于 2013-03-21T12:36:07.200 に答える
0

これを試して 

$("#image1").click(function(){

if ($(this).is(":checked")) {

     $("#div-id1").show("slide up");

}
});
$("#image2").click(function(){

if ($(this).is(":checked")) {

     $("#div-id2").fadeIn("slow");
}
});

http://jsfiddle.net/tamilmani/2CJdd/

于 2013-03-21T12:34:52.597 に答える
0

これを試してみてください.それは私のために働いていますDEMO

$("#image1").click(function(){
    if ($("#image1").is(":checked")) {
      //show the hidden div
       $("#div-id1").show();

    }
});

$("#image2").click(function(){
    if ($("#image2").is(":checked")) {
      //show the hidden div
      $("#div-id2").show();

    }
});
于 2013-03-21T12:32:02.863 に答える