자바 스크립트에서 클릭 소스 가져 오기?

저는 아주 기본적인 자바 스크립트를 사용하는 웹 페이지를 디자인하고 있습니다.자바 스크립트에서 클릭 소스 가져 오기?

HTML :

<!DOCTYPE html> 
<html> 
<body> 

<img id="apple" onclick="display()" src="images/apple.jpg" width="150" height="150"> 

<img id="pineapple" onclick="display()" src="images/pineapple.jpg" width="130" height="210"> 

<br><br> 

<div id="description" style="width:300px;height:100px;border-top: 1px solid #000; border-bottom: 4px solid #000; border-left: 2px solid #000; 

border-right: 4px solid #000;padding: 5px;"></div> 

<br> 

<button type="button" onclick="reset()">Reset</button> 

<script type="text/javascript" src="obst.js"></script> 

</body> 
</html>

가 여기에 자바 스크립트입니다 : 설명 상자에 사과를 표시 텍스트의 이미지에

function display() 
{ 
document.getElementById("description").innerHTML="der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 

Tag hält den Arzt weg<br>- An apple a day keeps the doctor away"; 
} 

function reset() 
{ 
document.getElementById("description").innerHTML=""; 
}

클릭 여기에 코드입니다. 파인애플의 이미지를 클릭하면 같은 장소에 다른 텍스트가 표시됩니다.

대신 apple(), pineapple()과 같은 다른 함수를 사용하여 텍스트를 삽입하는 대신, 뭔가가 클릭 될 때마다 디스플레이 기능을 호출하는 것이 더 쉬우 며, 스크립트가 소스를 식별 할 수있는 경우 디스플레이 기능에서 클릭 (즉, 클릭 한 이미지)하면 텍스트를 적절하게 삽입 할 수 있습니다.

클릭 소스를 식별하려면 어떻게해야합니까?

출처

2012-11-11 Prashanth Victor

this을 display() 핸들러에 전달하면 클릭을 수신 한 DOM 요소의 속성에 액세스 할 수 있습니다. 여기에 바이올린이 있습니다 : http://jsfiddle.net/dandv/BaNdS/. 본질적으로

<img id="apple" onclick="display(this)" ... > 

<img id="pineapple" onclick="display(this)" ... > 

<script type="text/javascript"> 
    function display(self) { 
     alert(self.id); 
    } 
</script>

출처

2012-11-11 12:56:43

더 쉬운 방법이 있습니다.

<img id="apple" onclick="display('apple');" …> 
<img id="pineapple" onclick="display('pineapple');" …>

이

더 나은 솔루션 :

이

function selectFruit(fruit){ 
    if(fruit == 'apple'){ 
     ..... 
    }else if(fruit == 'pinapple'){ 
     ..... 
    } 
    ... 
}

출처

2012-11-11 12:56:50

나는 OP에 많은 if-else 문이있는 함수가 필요하다고 생각하지 않습니다. [백만 개의 if-statements에 대한 대안] (http://stackoverflow.com/q/10029089/1048572)을 살펴보십시오. – Bergi

간단하고 쉬운 해결책은 : 다음 display 함수에 인수를 전달 변수를 사용 (HTML 마크 업에서 더 JS) 자바 스크립트 전용을 사용합니다 traditional 또는 심지어 advanced 이벤트 처리 모델. 여러 요소에 연결될 수있는 리스너는 이벤트 객체를 전달 받게됩니다.이 객체에서 클릭 된 요소를 확인할 수 있습니다. 예 : 아마

function clickHandler(eventObj) { 
    var elem = eventObj.target; 
    if (elem.nodeName.toLowerCase() == 'img' && elem.id) 
     display(elem.id); 
}

출처

2012-11-11 12:58:15 Bergi

간단한 방법 :

var code, node = document.getElementById('description'); 

code = { 
    apple : "Apple", 
    pineapple: "Pineapple" 
}; 

function display(src) { 

    node.innerHTML = node.innerHTML ? "" : code[ src.id ] ; 

} 

for (var i in code) { 

    document.getElementById(i).onclick = function() { display(this) }; 

}

Demo on jsFiddle

출처

2012-11-11 13:01:15 0x499602D2

당신은 this.id 사용할 수 있습니다

<img id="apple" onclick="display(this.id)" src="images/apple.jpg" width="150" height="150"> 

<img id="pineapple" onclick="display(this.id)" src="images/pineapple.jpg" width="130" height="210">

다음 ID를 잡을

function display(clicked_id) 
{ 
alert(clicked_id); 
}

출처

2012-11-11 13:01:31

나는 약간 다른 방향으로 갈 것 : 각각의 가능한 "용어"를

원하는 내용으로 텍스트의 블록이 숨겨져 있습니다.
각 이미지 태그에 적절한 자리 표시 자의 ID를 rel 속성으로 추가하십시오.
페이지로드시 JavaScript가 실행되고 클릭 이벤트가 자동으로 할당됩니다.

샘플 HTML은 다음과 같습니다

<img id="apple" src="images/apple.jpg" rel="desc_Apple" width="150" height="150" /> 

<img id="pineapple" src="images/pineapple.jpg" rel="desc_Pineapple" width="130" height="210" /> 

<div class="item_placeholder" id="desc_Apple"> 
der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An apple a day keeps the doctor away 
</div> 
<div class="item_placeholder" id="desc_Pineapple"> 
der Apfel - Pineapple<br>die Äpfel - Pineapples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An Pineapple a day keeps the doctor away 
</div>

그 숨겨진하기 위해 CSS를 잊지 마세요 :

.item_placeholder { display: none; }

그리고 마지막으로 마법

는 그들 모두를 바인딩 :

window.onload = function() { 
    for (var i = 0; i < document.images.length; i++) { 
     var image = document.images[i]; 
     var rel = image.getAttribute("rel"); 
     if (rel && rel.length > 0) { 
      image.onclick = ItemImageClick; 
     } 
    } 
}; 

function ItemImageClick() { 
    var rel = this.getAttribute("rel"); 
    var placeholder = document.getElementById(rel); 
    if (placeholder) { 
     document.getElementById("description").innerHTML = placeholder.innerHTML; 
    } else { 
     alert("DEBUG - element not found " + rel); 
    } 
}

Live test case.

출처

2012-11-11 13:05:43

자바 스크립트에서 클릭 소스 가져 오기?

답변

관련 문제