jQuery를 사용하여 앵커 태그를 기반으로 이미지를 전환하는 방법은 무엇입니까?

나는 썸네일 이미지 목록을 가지고 있습니다. 사용자가 작은 축소판 이미지를 클릭하면 전체 축소 이미지가 교체됩니다. 나는 앵커 태그 이름을 얻으려고 노력하여 값 i을 폭발시킬 수 있습니다. 그러나 나는 그것을 작동시킬 수 없다, 어떤 생각?jQuery를 사용하여 앵커 태그를 기반으로 이미지를 전환하는 방법은 무엇입니까?

내 자바 스크립트 :

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> '; 
    } 
?>

출처

2010-02-02 NULL

코드에는 실제로 jQuery가 없습니다. –

다른 이벤트를 선언해야만 첫 번째 이벤트가 이미지를 바꿀 수 있고 두 번째 이벤트가 나에게 앵커 태그를 가져다 줄 수도 있습니다 ("# main") 대신 document.getElementById ("main")를 사용하고 있습니다. 이름. 나는 이와 같은 또 다른 사건을 포함 시켰습니다. 불행히도, 이미지를 바꾸기 위해 클릭하면, 그것은갔습니다. (예 : href = "images/prevFeb-1.jpg? prevDay = 1"onclick = "swap (this); getAnchorName(); return false;") 스왑 창보다는 다른 페이지. 어떤 아이디어? – NULL

대신 또는뿐만 아니라 그에게 ID를 부여 좋을 것. jQuery를에 액세스

는 (예를 들어) 될 것이다 : 당신의 document.getElementById를를 사용

$("#day-1")

또는 jQuery를하지 않고

당신이 정말로 이름을 얻고 싶은 경우에 : 당신이 축소판 클래스 "미리보기"를 속성 가정

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

출처

2010-02-02 14:48:11

첫 번째 이벤트가 이미지를 스왑하고 두 번째 이벤트가 앵커 태그 이름을 갖도록 다른 이벤트를 선언해야한다고 생각합니다. 나는 이와 같은 또 다른 사건을 포함 시켰습니다. 불행히도, 이미지를 바꾸기 위해 클릭하면 다른 페이지로 이동합니다 (href = "images/prevFeb-1.jpg? prevDay = 1"onclick = "swap (this); getAnchorName(); false false;") , 대신 스왑 창. 어떤 아이디어? – NULL

, 당신은

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

})

주 getter로 attr() 방법의 사용을하고 있습니다 setter

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

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

PHP를 다시 쓸 수 있습니다. n으로 :

// 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" />'; 
    } 
?>

출처

2012-02-22 13:52:01

jQuery를 사용하여 앵커 태그를 기반으로 이미지를 전환하는 방법은 무엇입니까?

답변

관련 문제