Question

我有这个代码，并且想要在取消选择图像时切换选择（文本框）（在切换时）。此外，是否可以隐藏文本框，以便在传递“提交”时，我只能获取所选图像？

最好的方法是什么？

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

Answer 1

在你的setFormImage函数中添加了一个else：

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

希望这有帮助。

Answer 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
});

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

切换图像

3 个答案: