Javascript onclick 更改变量值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12326188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript onclick change variable value
提问by TheShadowbyte
I am new to JavaScript and I need some help. I am making a website and I have several images of team members that if clicked (so I'm guessing the onclick event) will change the variable values corresponding to that team member. For instance, if I click on a picture of Bill Gates, in a separate div, I need to have a variable (let's say Name) change value to Bill Gates. Then, if I click on an image of Steve Jobs, the variables containing Bill Gates' data will get overwritten with the data of Steve Jobs. How do I do this?
我是 JavaScript 新手，需要一些帮助。我正在制作一个网站，我有几张团队成员的图片，如果点击这些图片（所以我猜测 onclick 事件）将更改与该团队成员对应的变量值。例如，如果我在单独的 div 中单击 Bill Gates 的图片，我需要有一个变量（假设名称）更改 Bill Gates 的值。然后，如果我点击史蒂夫乔布斯的图像，包含比尔盖茨数据的变量将被史蒂夫乔布斯的数据覆盖。我该怎么做呢？
Thank you.
谢谢你。
采纳答案by David says reinstate Monica
Assuming mark-up like the following:
假设标记如下：
<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>
Then a relatively simple, and plain JavaScript, approach:
然后是一种相对简单且纯 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');
};
}
回答by jtheman
HTML:
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:
JS：
$(function(){
$('.member img').click(function(){
$('#variables').html($(this).closest('span').html());
});
});
回答by Elliott
Onclickattribute is right. You need to add the name of a javascript function to the image's onclick attribute (eg <img src="" onclick="changeVariable()"...).
Onclick属性是对的。您需要将 javascript 函数的名称添加到图像的 onclick 属性（例如<img src="" onclick="changeVariable()"...）。
If you want text on the page to change depending on who you click on, you'll need to look at selecting divs in Javascript using getElementById()or similar and look at the InnerHTML property.
如果您希望页面上的文本根据您点击的人而改变，您需要查看使用getElementById()或类似的在 Javascript 中选择 div并查看 InnerHTML 属性。
See: http://woork.blogspot.co.uk/2007/10/how-to-change-text-using-javascript.html
参见：http: //woork.blogspot.co.uk/2007/10/how-to-change-text-using-javascript.html
回答by Iori
Hope this helps
希望这可以帮助
<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>
