Javascript/JQuery 图像选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6770424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/JQuery Image Picker
提问by dscl
I'm looking for JS/JQuery way to do the following 1: Display a series of paint chips side by side along with a 'none' image 2: When a chip is clicked A: Highlight it with a border to show it has been selected B: Change the value of a text field/perhaps a hidden field to the appropriate color name (so the images should be flagged indigo, solaria, etc and update accordingly)
我正在寻找 JS/JQuery 方法来执行以下操作 1：并排显示一系列油漆芯片以及“无”图像 2：单击芯片时 A：用边框突出显示它以显示它已被选择 B：将文本字段/可能隐藏字段的值更改为适当的颜色名称（因此图像应标记为靛蓝、日光等并相应更新）
I had found this post on Stackoverflow, but couldn't get it working: jQuery image picker
我在 Stackoverflow 上找到了这篇文章，但无法让它工作：jQuery image picker
And here's my current code based on the above link
这是我当前基于上述链接的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$('div#image_container img').click(function(){
// set the img-source as value of image_from_list
$('input#image_from_list').val( $(this).attr("src") );
});
</script>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" />
<img src="images/riverway.jpg" />
<img src="images/solaria.jpg" />
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
</body>
</html>
Any help would be greatly appreciated!!!!
任何帮助将不胜感激！！！！
Well I ended up fixing the issue actually and here's the code I used
好吧，我最终解决了这个问题，这是我使用的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" col="red" border="0" />
<img src="images/riverway.jpg" col="blue" border="0" />
<img src="images/solaria.jpg" col="yellow" border="0" />
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
<script>
$("div#image_container img").click(function () {
$("div#image_container img").attr("border","0");
$(this).attr("border","4");
$("input#image_from_list").val($(this).attr("col"));
});
</script>
</body>
</html>
回答by RVera
I know this has been already answered but I developed a plugin that solves this exact problem and is pretty well maintained.
我知道这已经得到了回答，但我开发了一个插件来解决这个确切的问题并且维护得很好。
回答by Michal
Your code does not work because you forgot to enclose your jquery statements in $(document).ready block. Your updated code works because you moved the script block to the bottom but technically you should enclose it in document.ready
您的代码不起作用，因为您忘记将 jquery 语句括在 $(document).ready 块中。您更新后的代码有效，因为您将脚本块移到底部，但从技术上讲，您应该将其包含在 document.ready 中
Here is a working version
这是一个工作版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#image_container img').click(function(){
//remove border on any images that might be selected
$('#image_container img').removeClass("img_border")
// set the img-source as value of image_from_list
$('#image_from_list').val( $(this).attr("src") );
$('#data_value').val( $(this).attr("id") );
// $('#data_value').val( $(this).data("options").color );
//add border to a clicked image
$(this).addClass("img_border")
});
})
</script>
<style>
.img_border {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" id="vermillion"/>
<img src="images/riverway.jpg" id="riverway"/>
<img src="images/solaria.jpg" id="solaria"/>
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
<input id="data_value" type="text" value="" />
</form>
</body>
</html>
回答by dscl
Updated the code I finally used in the question, but here it as well
更新了我最终在问题中使用的代码，但也在这里
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="image_container">
<img src="images/vermillion.jpg" col="red" border="0" />
<img src="images/riverway.jpg" col="blue" border="0" />
<img src="images/solaria.jpg" col="yellow" border="0" />
</div>
<form action="" method="get">
<input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
<script>
$("div#image_container img").click(function () {
$("div#image_container img").attr("border","0");
$(this).attr("border","4");
$("input#image_from_list").val($(this).attr("col"));
});
</script>
</body>
</html>
