jquery - jquery通过单击突出显示图像

Question

我有两个问题：

1. 我正在使用此代码：http: //jsfiddle.net/9rFKB/

正如您所看到的，当我单击某些图像时，它的边框变得粗体，并且字段“大小”获取图像的名称。如何获取图像 ID 值？

1. 当我加载页面时，我希望所选图像已经带有粗体边框。我需要添加什么？

谢谢！

<p id="thumbs">
    <input type="hidden" name="size"> 

    <img src='images/size1.png' id='1' />
    <img src='images/size2.png' id='2' />
    <img src='images/size3.png' id='3' />
    <img src='images/size4.png' id='4' />               

</p>



<script>
$('#thumbs').delegate('img', 'click', function() {
    var $this = $(this);

    $('#thumbs img').removeClass('border-highlight');


    $this.addClass('border-highlight');


    $('[name="size"]').val( $this.attr('src').substring($this.attr('src').lastIndexOf('/')+1) );
//    alert( $('[name="size"]').val() );
});
</script>

Answer 1

1.使用下面的点击图片获取图片ID：

 $(this).attr("id")

1. 要突出显示所选图像（假设您将从数据库中获取图像 id，但要在小提琴中进行硬编码测试），请使用：

$(document).ready(function(){
var id = "img1";
$("#thumbs #"+id).addClass('border-highlight');
});

DEMO FIDDLE

注意：将 id 添加到img标签以进行测试。

Answer 2

var id = $(this).attr("id");

或者

var id = $(this).prop("id");

然后像这样使用它

$("#" + id).val(....

对于存储数据，您可以使用 cookie localStorage 和 sessionStorage

Answer 3

var img = $('#thumbs > img:nth-child(2)');
img.attr('class', 'border-highlight');
$('[name="animal"]').val( img.attr('src').substring(img.attr('src').lastIndexOf('/')+1) );
alert( $('[name="animal"]').val() );

上面的代码允许您通过简单地传递子索引值来指定要在“thumbs”div 中突出显示的图像。只需传递要替换“2”的 id 值。JsFiddle 演示