0

我在下面遇到的问题是我正在使用一个通过几个不同阶段的表单，并且单击功能会触发“显示”。

有没有办法让节目由类似于 onload 的东西触发？

所以在这里解释更大的图景。我有一个带有单选按钮的表单来“添加图像”。表格的第 1 阶段适用于作者。表单的第 2 阶段适用于内容编辑器。这样表单就完成了并传递给了内容编辑器。如果在第 1 阶段选中单选按钮，则会显示 div。当此表单传递到第 2 阶段时，我仍需要显示 div。希望这能进一步解释我的问题。

第 2 阶段是一个完全不同的页面。

对不起，这是我第一次来这里！

标记

<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

试试这个。它对我有用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 回答
0

hide()并show()在 jQuery 中将 aduration作为第一个参数。

有一个slideDown()andslideUp()功能，但我认为这不是你想要的。

看看这个小提琴

新标记

<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都经过检查，以检查相应容器id名称被拉出的特定复选框。div

我认为创建一个函数将是有益的。这样您就不需要if/else一遍又一遍地键入相同的块。记住，重复的代码是不好的

另外，我不知道它是否超出了您的项目范围，但是在我的 Fiddle 中，我使用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 回答