Как переключить изображение на основе тега привязки с помощью jQuery? - PullRequest
Новая
       184

Как переключить изображение на основе тега привязки с помощью jQuery?

0 голосов
/ 02 февраля 2010

У меня есть списки миниатюр изображений. Когда пользователь щелкает маленькое уменьшенное изображение, он меняет его, чтобы показать полное изображение. Я пытался получить имя тега привязки, чтобы я мог взорвать значение i. Но я не могу заставить его работать, есть идеи?

Мой JavaScript: 

function swap(image) {
   document.getElementById("main").src = image.href;
}

Мой скрипт HTML и PHP: 

<img id="main" src="images/main.jpg" width="226" height="226" alt="" />

<p><strong>Day <?php echo $i; ?>:</strong></strong><br /><?php echo $today[$i]; ?></p>
</div>
</div>

<?php
 for($i=1; $i<$day; $i++)
   {
     echo'<a href="images/prevDay-'.$i.'.jpg" name="day-'.$i.'" onclick="swap(this); return false;">';
     echo'<img src="images/thumbDay-'.$i.'.jpg" width="50" height="50" alt="" title="thumbDay-'.$i.'.jpg" /></a> ';
   }
?>

Ответы [ 2 ]

0 голосов
/ 22 февраля 2012

при условии, что вы используете атрибут thumbnail для класса, вы можете сделать 

$(".thumbnail").click(function(){
   // $(this) refers to the clicked element
   $("#main").attr("src", $(this).attr("href"))

})

Обратите внимание на использование метода attr() как getter и setter

// getter:
$(selector).attr(attr_name) 

// setter
$(selector).attr(attr_name, attr_value)

Ваш PHP может быть переписан как: 

// no need for <a> element
<?php
 for($i=1; $i<$day; $i++)
   {
     echo'<img class="thumbnail" src="images/thumbDay-'.$i.'.jpg" width="50" height="50" alt="" title="thumbDay-'.$i.'.jpg" />';
   }
?>
0 голосов
/ 02 февраля 2010

Вы бы лучше дали ему идентификатор вместо этого или также.

Тогда доступ к jQuery будет (например): 

$("#day-1")

Или без jQuery, просто используя вашdocument.getElementById.

Если вы действительно хотите получить его по имени: 

$("a[name='day-1']")
...