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更改变量值

回答

相关问题