切断图像

我有这段代码，并希望删除选择（文本框），当图像被取消选择（在切换）。另外，是否可以隐藏文本框，以便在“提交”时传递我只能获取所选图像？切断图像

什么是最好的方法？

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

来源

2013-07-11 user2496011

只是一个供参考... jQuery的1.4.4非常过时。 – DevlshOne

加入否则，如果您setFormImage功能：

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

希望这有助于。

来源

2013-07-11 01:59:34

真棒，谢谢！ – user2496011

不客气。请接受答案，谢谢！ –

正如 “清理” 的建议，就可以消除这一切：

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

来源

2013-07-11 02:09:31 DevlshOne

我d采取更加主干的方法，只是重新呈现形式或形式的一部分哟你就像感兴趣的还有，如果你要使用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(); 
    }); 
});

来源

2013-07-11 02:12:48

回答

相关问题