0

我想为每个图像添加一个按钮，单击按钮时图像将添加边框。

<img src="icon.png" id="vermillion" class="pic"/>

<div class="btn"id="vermillion">select</div>

我不擅长 Javascript。

我做了改变

$('#image_container.btn').click(function(){

我不确定它是否正确..

原始 HTML 代码：

    <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="icon.png" id="vermillion" />
    <img src="icon.png" id="riverway"/>
    <img src="icon.png" 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>
4

1 回答 1

0

使用 CSS 伪类。

http://www.w3schools.com/css/css_pseudo_classes.asp

特别是:active伪类。

于 2013-07-14T10:45:30.637 回答