| godofjavascript | 17.12.2012 10:31 |
получение src картинки при клике на кнопку
Здравствуйте!
имеется каталог товаров. в каждой позции имеется картинка товара и кнопка заказать как сделать так что бы при клике на кнопку заказать в переменную записался src картинки |
|
с помощью jQuery это будет так:
$('.order').click(function () {
var a = $('img.SomeClassImg').attr('src');
})
|
с записью проблем нет. проблема в том что товаров много. и как определять какой src нам нужно записывать.
например такая структура:
<div class="CatalogList">
<div>
<img src="img1.jpg">
<div class="button"></div>
</div>
<div>
<img src="img2.jpg">
<div class="button"></div>
</div>
<div>
<img src="img3.jpg">
<div class="button"></div>
</div>
</div>
необходимо что бы при клике на <div class="button"> в переменную писался src картинки которая лежит с ним в блоке |
$('.CatalogList .button').click(function () {
var src = this.parent('div').find('img').attr('src');
// в src значение атрибута src
});
|
Без jQuery нужно?
|
спасибо, можно и с ним. все равно библиотека подключена для "аккордеона" если структура немного будет отличаться. к примеру больше вложеностей. можно будет указать parent('класс_общего_блока') и будет так же работать?
|
parents ! указываю на "s" в конце имени метода. Тогда будет.
|
pivas.net, рукожоп, если много элементов то событие вешается на родителя.
$('div.CatalogList').on('click', '> div .button', function () {
var src = $(this).parent('div').find('img').attr('src');
});
|
Если больше одного родителя, то лучше использовать .closest() вместо .parent()
|
tsigel, верно подметил, я скопипастил не думая. ну у него в примере вроде и парент прокатит. я не даром вангу позвал, может она нам подсказала бы его разметку...
|
godofjavascript, правы.
Про много элементов не заметил, выцепил лишь разметку из коммента, буду внимательней читать. |
pivas.net, да) сам по началу жопоруком был) делал "лишь бы работало" а потом, как прокачал скилл, уже начал всякие оптимизации продумывать и прочее еще до того как заработает, потому что уже знал как сделать чтобы просто работало и этого было мало)
|
разметка может быть любой. имеется кнопка, картинка и много всего на этой же странице. поэтому ее изначально не было. та разметка лишь для примера
|
godofjavascript,
кстати, вы давно руки-то проверяли. В том конкретном примере что же тогда не дооптимизировали?
$('div.CatalogList').on('click', '> div .button', function () {
var src = this.parentNode.childNodes[1].getAttribute('src');
});
так что - менее оптимально или так же? |
Цитата:
Цитата:
Цитата:
Цитата:
|
<div class="CatalogList">
<div>
<img src="img1.jpg">
<div class="button">11</div>
</div>
<div>
<img src="img2.jpg">
<div class="button">22</div>
</div>
<div>
<img src="img3.jpg">
<div class="button">33</div>
</div>
</div>
<script>
function catalog()
{
var a = 'getElementsBy';
for(i=0;i<3;i++)
{
eval('document.'+a+'ClassName(\'button\')['+i+']').onclick = function()
{
alert( eval('this.parentNode.'+a+'TagName(\'img\')[0].src') );
}
}
}
catalog();
</script>
|
Цитата:
|
Ruslan_xDD,
О нет только не это |
Ruslan_xDD,
eval(eval('ёба = "ёба";ный= "ный";стыд= " стыд";')
eval("alert(eval('ёба'') + eval('ный') + eval(' стыд'))"))
|
сегодня каталог не успею заверстать, завтра сделаю структуру и можно будет определиться среди методов)
|
<div class="catalogitem"> <h1>Название товара</h1> <div class="col3"> <div class="col_left"> <img src="img/img1.jpg"> </div> <div> описание товара и характеристики </div> <div class="col_right"> <div class="AddToBasket"> <div class="button_blue">В корзину</div> </div> </div> </div> </div> код такой. при нажатии на <div class="button_blue">В корзину</div> в переменную писать img/img1.jpg такой код мне поможет?
$('.catalogitem .button_blue').click(function () {
var src = this.closest('.catalogitem').find('img').attr('src');
});
|
Цитата:
$('.catalogitem .button_blue').click(function () {
var src = this.*!*closest('.col3')*/!*.find('img').attr('src');
// в src значение атрибута src
});
|
а, ну да. лишний переход к родителю ни к чему тут
|
$(function() {
$('.button_blue').click(function() {
alert(1);
var src = this.closest('.col3').find('img').attr('src');
alert(2);
});
});
"1" выводится "2" не выводится |
починил
$(function() {
$('.button_blue').click(function() {
var src = $(this).closest('.col3').find('img').attr('src');
alert(src);
});
});
сделал так |
Ну да) jQuery то надо включить, логично)
|
| Часовой пояс GMT +3, время: 12:04. |