Question

我想为每张图片添加一个按钮，当点击按钮时，图像会添加边框。

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

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

我在Javascript方面不擅长。

我做了改变

$（ '＃image_container.btn'）。点击（函数（）{

我不确定它是否正确..

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

Answer 1

使用CSS伪类。

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

尤其是：有效伪类。

单击按钮时为图像添加边框

1 个答案: