切斷圖像

我有這段代碼，並希望刪除選擇（文本框），當圖像被取消選擇（在切換）。另外，是否可以隱藏文本框，以便在「提交」時傳遞我只能獲取所選圖像？切斷圖像

什麼是最好的方法？

<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

回答

相關問題