Question

我有两个问题：

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

正如您所看到的，当我点击某个图像时，它会变为粗体边框，而字段“size”会获得图像的名称。如何获取图像ID值？

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

谢谢！

<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")

要高亮显示所选图像（假设您将从数据库中获取图像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() );

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

jquery点击突出显示图像

3 个答案: