Javascript 关闭图像_Javascript_Image_Toggle

Javascript 关闭图像

javascript image

Javascript 关闭图像,javascript,image,toggle,Javascript,Image,Toggle,我有这个代码，并希望删除选择（文本框）时，图像被取消选中（切换）。另外，是否可以将文本框隐藏起来，以便在发送“提交”时只能获取选定的图像最好的方法是什么 <html> <head> <style type="text/css"> div img { cursor: pointer; border: 1px solid #f00; } img { padding: 5px; } img.clicked { padding: 0;

我有这个代码，并希望删除选择（文本框）时，图像被取消选中（切换）。另外，是否可以将文本框隐藏起来，以便在发送“提交”时只能获取选定的图像

最好的方法是什么

<html>
<head>
<style type="text/css">
div img {
    cursor: pointer;
    border: 1px solid #f00;
}

img {
  padding: 5px;
}
img.clicked {
  padding: 0;
  border: 5px solid blue;
}

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
    if (id != '' && !document.getElementById('input_'+id)) {
        var img = document.createElement('input');
        img.type = 'text';
        img.id = 'input_'+id;
        img.name = 'images[]';
        img.value = id;

        document.imageSubmit.appendChild(img);
    }
}
$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
});

</script>
</head>
<body>
<pre>


</pre>
<div id="jqueryimages" style="float: left; width: 49%;">
    <h1>Image Selection</h1>
    5. <img src="http://www.handmadepotery.com/home.gif" id="img-5"/>
    <br/>
    6. <img src="http://www.handmadepotery.com/home.gif" id="img-6"/>
    <br/>
    7. <img src="http://www.handmadepotery.com/home.gif" id="img-7"/>
    <br/>
    8. <img src="http://www.handmadepotery.com/home.gif" id="img-8"/>
</div>
<script>
ims = document.getElementsByTagName("img");

for( i=0 ; i<ims.length ; i++ ){
  ims[i].onclick=function() {
    if (this.className == "clicked") {
      this.className = "";
    } else {
      this.className = "clicked";
    }
  };
}
</script>

<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
    <input type="submit" value="View Selected"/>
</form>
</body>
</html>


部门经理{
光标：指针；
边框：1px实心#f00；
}
img{
填充物：5px；
}
img.clicked{
填充：0；
边框：5px纯蓝色；
}
函数setFormImage（id）{
if（id！='&&！document.getElementById（'input_'+id））{
var img=document.createElement（'input'）；
img.type='text'；
img.id='输入\'+id；
img.name='images[]'；
img.value=id；
document.imageSubmit.appendChild（img）；
}
}
$（文档）.ready（函数（）{
$（'#jqueryimages img'）。单击（函数（）{
setFormImage（this.id）；
});
});
图像选择
5.


6.


7.


8.
ims=document.getElementsByTagName（“img”）；
对于（i=0；i在setFormImage函数中添加了一个else if）：
ims = document.getElementsByTagName("img");
for( i=0 ; i<ims.length ; i++ ){
  ims[i].onclick=function() {
    if (this.className == "clicked") {
      this.className = "";
    } else {
      this.className = "clicked";
    }
  };
}

希望这有帮助。
作为“清理”建议，您可以消除所有这些：
$("img").toggle(
function () {
    $(this).addClass("clicked");
},
function () {
    $(this).removeClass("clicked");
});

将放在此处：
$(document).ready(function(){
    var allImages = $("#jqueryimages img");
    var theForm = $("form[name=imageSubmit]");

    var renderImageInputs = function(){

        // empty the form
        theForm.find("[name^=images]").remove();

        // fill it back up
        allImages.filter(".clicked").each(function(){
            var id = $(this).attr("id");

            $("<input>", {
                type: 'text',
                id: 'input_' + id,
                name: 'images[]',
                value: id
            }).appendTo(theForm);
        });
    };

    // bind to clicks on the images    
    allImages.click(function(){
        $(this).toggleClass("clicked");
        renderImageInputs();
    });
});

我会采用一种更为主干的方法，只需重新呈现表单或您感兴趣的表单的一部分。此外，如果您要使用jquery，还可以使用它来帮助您生成对表单的更改：

$（文档）.ready（函数（）{
var allImages=$（“#jqueryimages img”）；
var theForm=$（“form[name=imageSubmit]”）；
var renderImageInputs=函数（）{
//清空表格
form.find（“[name^=images]”）。remove（）；
//把它倒回去
allImages.filter（“.clicked”）.each（函数（）{
var id=$（this.attr（“id”）；
$("", {
键入：“文本”，
id:'输入\'+id，
名称：'images[]'，
值：id
}).附录（表格）；
});
};
//绑定到图像上的单击
所有图像。单击（函数（）{
$（this.toggleClass（“单击”）；
renderImageInputs（）；
});
});
仅供参考……jQuery 1.4.4已经非常过时了。
$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
// PUT HERE
});

$(document).ready(function(){
    var allImages = $("#jqueryimages img");
    var theForm = $("form[name=imageSubmit]");

    var renderImageInputs = function(){

        // empty the form
        theForm.find("[name^=images]").remove();

        // fill it back up
        allImages.filter(".clicked").each(function(){
            var id = $(this).attr("id");

            $("<input>", {
                type: 'text',
                id: 'input_' + id,
                name: 'images[]',
                value: id
            }).appendTo(theForm);
        });
    };

    // bind to clicks on the images    
    allImages.click(function(){
        $(this).toggleClass("clicked");
        renderImageInputs();
    });
});