Question

我有一个包含多个图像的分类广告列表。我有创建拇指的PHP，我只想做一个图像库，点击拇指改变主div中的图像。我的问题是存在多个广告的循环情况，因此我有一个针对主要div的问题，因为.class attibute定位了该类的所有实例。一个div＆＃39; .annonce＆＃39;将图像放在单独的div .annoncephoto1，.annoncephoto2等中... 除了前缀120__或600__之外，图像具有相同的名称，具体取决于它是用于主窗口还是拇指窗口。那么如何定位当前的主要div？这是我的javascript代码，但可以更改页面上所有主div中的图像。

<script type="text/javascript">
$('.thumbs img').click(function(){
    $('.bigimage').attr('src',$(this).attr('src').replace('120__','600__'));    
});
</script>

感谢Lazarevic Ivan在stackoverflow上找到的代码库。这里问的是html：

foreach($results as $book){
$specialtexts = preg_replace($patterns,$reps,$book[8]);  
echo '<div class="annonces">';
if ($book[9])
{
$p = new phMagick();
$imageUrl = $p->onTheFly('annonce/' . $book[10], 120);
$imageUrl = $p->onTheFly('annonce/' . $book[10], 600);
echo '<div class="annoncephoto1" id="id1" ><img class="bigimage" src="' . $imageUrl . '" /></div>';
} 
echo '<div class="thumbs" >';
if ($book[10])
{$p = new phMagick();
$imageUrl = $p->onTheFly('annonce/' . $book[10], 600);
$imageUrl = $p->onTheFly('annonce/' . $book[10], 120);
?>
<?php echo '<img src="' . $imageUrl . '" />';
}

...等 $ imageUrl = $ p-＆gt;如果图片不存在，onTheFly会调整图片大小。

这是一个简化的jsfiddle版本：http://jsfiddle.net/qwhat/trrwygdv/。单击右侧的两个图像应立即将较大的图像更改为左侧。

Answer 1

在jQuery事件处理程序中，this是触发事件的当前元素。

使用current元素创建一个取决于html结构的遍历。

尝试：

$(function(){

    $('.thumbs img').click(function(){
        var $bigImage = $(this).parent().prev().find('.bigimage');
        $bigImage.attr('src',$(this).attr('src').replace('120__','600__'));    
    });

});

您的代码未显示<div class="annonces">的结束。如果在循环中正确关闭它，您可以使用：

var $bigImage = $(this).closest('.annonces').find('.bigimage');

定位类元素的单个实例

1 个答案: