JQuery на клик изменить большое изображение - PullRequest
Новая
       12

JQuery на клик изменить большое изображение

1 голос
/ 03 марта 2011

Я пытаюсь изменить большое изображение при нажатии на миниатюру 

$("#thumbnails a").click(function(){                
                 $id = $(this).attr("id");
                 $("#large-img img" . $id).addClass("active");      
                 return false;
            });

HTML: 

<div id="large-img">
        <img src="1.jpg" alt="" title="" id="yes" style="display: none;"/>        
        <img src="2.jpg" alt="" title="" id="no" style="display: none;"/>
</div>

<div id="thumbnails">
            <a href="#" id="yes">
                <img src="1_small" alt="" title="" width="76" height="76"/>
            </a>
            <a href="#" id="no">
                <img src="2_small.jpg" alt="" title="" width="76" height="76"/>    
            </a>
</div>

Это мой старый код, но вы не можете его исчезнуть. Я хочу добиться того же самого. 

$('#thumbnails a').click(function(){
                $('#large-img').css('background-image', 'url(' + $img + ')');
                $('#medium-img').css('background-image', 'url(' + $img + ')');              
            return false;
        });

Ответы [ 3 ]

1 голос
/ 03 марта 2011 
$("#thumbnails a").click(function(){                
                 var id = $(this).attr("id");
                 $('#large-img').find('#'+id).addClass("active");      
                 return false;
            });
0 голосов
/ 03 марта 2011

Пожалуйста, попробуйте: 

$("#large-img img#" + id).addClass("active");
0 голосов
/ 03 марта 2011

У вас не может быть нескольких элементов с одним и тем же идентификатором, но вы наверняка могли бы перегрузить заголовок или имя a элементов. Тогда вам просто нужен знак # и использовать правильный конкатенатор строк для Javascript.

Оповещение о спойлере

JS: 

$("#thumbnails a").click(function(e){
    e.preventDefault();                
    id = $(this).attr("name");
    $("#large-img img#" + id).addClass("active");      
});

HTML: 

<div id="large-img">
    <img src="1.jpg" alt="" title="" id="yes" style="display:none;"/>        
    <img src="2.jpg" alt="" title="" id="no" style="display:none;"/>
</div>
<div id="thumbnails">
    <a href="#" name="yes"><img src="1_small" alt="" title="" width="76" height="76"/></a>
    <a href="#" name="no"><img src="2_small.jpg" alt="" title="" width="76" height="76"/></a>
</div>
...