0

我正在寻找 JS/JQuery 方法来执行以下操作 1：并排显示一系列油漆芯片以及“无”图像 2：单击芯片时 A：用边框突出显示它选择 B：将文本字段/可能是隐藏字段的值更改为适当的颜色名称（因此应将图像标记为靛蓝、日光等并相应更新）

我在 Stackoverflow 上找到了这篇文章，但无法正常工作：jQuery 图像选择器

这是我当前基于上述链接的代码

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

任何帮助将不胜感激！！！！

好吧，我实际上最终解决了这个问题，这是我使用的代码

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

3 回答 3

6

我知道这已经得到解答，但我开发了一个插件来解决这个确切的问题并且维护得很好。

http://rvera.github.com/image-picker/

于 2013-01-25T01:25:54.193 回答
3

您的代码不起作用，因为您忘记将 jquery 语句包含在 $(document).ready 块中。您更新的代码有效，因为您将脚本块移到了底部，但从技术上讲，您应该将其包含在 document.ready

这是一个工作版本

<!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>
于 2011-07-21T02:21:22.230 回答
2

更新了我最终在问题中使用的代码，但也在这里

<!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>
于 2011-07-21T02:20:51.070 回答