Javascript onclick更改變量值

我是JavaScript新手，需要一些幫助。我正在創建一個網站，我有幾個團隊成員的圖片，如果點擊（所以我猜onclick事件）會改變對應該團隊成員的變量值。例如，如果我點擊一張比爾蓋茨的照片，在一個單獨的div中，我需要一個變量（比如Name）來改變Bill Gates的價值。然後，如果我點擊Steve Jobs的圖像，包含Bill Gates數據的變量將被Steve Jobs的數據覆蓋。我該怎麼做呢？Javascript onclick更改變量值

謝謝。

來源

2012-09-07 TheShadowbyte

假設加價像下面這樣：

<div id="gallery"> 
    <img class="people" data-subject="Steve Jobs" src="path/to/imageOfSteve.png" /> 
    <img class="people" data-subject="Bill Gates" src="path/to/imageOfBill.png" /> 
</div> 
<span id="caption"></span>

然後一個相對簡單的，和普通的JavaScript，方法：

function identifySubject(image, targetEl) { 
    if (!image) { 
     return false; 
    } 
    else { 
     var targetNode = document.getElementById(targetEl) || document.getElementById('caption'), 
      person = image.getAttribute('data-subject'); 
      text = document.createTextNode(person); 
     if (targetNode.firstChild.nodeType == 3) { 
      targetNode.firstChild.nodeValue = person; 
     } 
     else { 
      targetNode.appendChild(text); 
     } 
    } 
} 

var images = document.getElementsByClassName('people'); 
for (var i=0, len=images.length; i<len; i++) { 
    images[i].onclick = function(e){ 
     identifySubject(this, 'caption'); 
    }; 
}

。

來源

2012-09-07 22:32:51

Onclick屬性是正確的。您需要將javascript函數的名稱添加到圖像的onclick屬性（例如<img src="" onclick="changeVariable()"...）。

如果您希望頁面上的文字根據您點擊的人而改變，您需要查看使用getElementById()或類似軟件在Javascript中選擇div並查看InnerHTML屬性。

參見：http://woork.blogspot.co.uk/2007/10/how-to-change-text-using-javascript.html

來源

2012-09-07 22:28:38 Elliott

希望這有助於

<img src="path/to/image1" onclick="getValue('bill gates')" /> 
<img src="path/to/image2" onclick="getValue('steve jobs')"/> 
<div id="show_value"></div> 

<script> 
function getValue(val){ 
    document.getElementById('show_value').innerHTML = val 
} 
</script>

來源

2012-09-07 22:31:46 Iori

謝謝你，這個工程。它不讓我給+1，因爲我沒有15的聲望，但是當它讓我時，我會這樣做。其他人也是，謝謝。 – TheShadowbyte

它的工作，當然，但好運保持該代碼和更新函數調用時（和*不*'如果'）你想改變和更新功能。 –

HTML：

<div class="member"><img src="billgates.jpg" /><span>Bill Gates bla bla</span></div> 
<div class="member"><img src="stevejobs.jpg" /><span>Steve Jobs bla bla</span></div> 
<div id="variables"></div>

JS：

$(function(){ 
    $('.member img').click(function(){ 
     $('#variables').html($(this).closest('span').html()); 
    }); 

});

來源

2012-09-07 22:33:08 jtheman

是的，它是JavaScript，但值得一提的是它確實需要使用[jQuery庫]（http://jquery.com/）。另外，爲什麼'html（）'而不是'text（）'？ –

當然，真的關於jQuery。很好地使用html是因爲如果用戶想要包含標記數據，它應該可以工作。另請注意，CSS應將span元素設置爲display =「none」 – jtheman

Javascript onclick更改變量值

回答

相關問題