关闭图像答案

【问题标题】：Toggle off image关闭图像
【发布时间】：2013-07-11 01:47:14
【问题描述】：

我有此代码，并希望在取消选择图像（在切换时）时删除选择（文本框）。此外，是否可以隐藏文本框，以便在“提交”时传递它，我只能获得选定的图像？

最好的方法是什么？

<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>

【问题讨论】：

仅供参考...jQuery 1.4.4 已经过时了。

标签： javascript image toggle

【解决方案1】：

在 setFormImage 函数中添加了 else if：

function setFormImage(id) {
 var imgTxt = document.getElementById('input_'+id);
 if (id != '' && !imgTxt) {
    var img = document.createElement('input');
    img.type = 'text';
    img.id = 'input_'+id;
    img.name = 'images[]';
    img.value = id;

    document.imageSubmit.appendChild(img);
 }else if(imgTxt){
    document.imageSubmit.removeChild(imgTxt);
 }
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

就像“清理”建议一样，您可以消除所有这些：

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(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
// PUT HERE
});

【讨论】：

【解决方案3】：

我会采用更加主干的方法，只需重新渲染表单或您感兴趣的表单部分。另外，如果您要使用 jquery，您不妨使用它来提供帮助您生成对表单的更改：

http://jsfiddle.net/a9qdr/1/

$(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();
    });
});

【讨论】：