JavaScript点击事件改变变量值

Question

我是JavaScript的新手，需要一些帮助。我正在制作一个网站，其中有几张团队成员的图片，如果点击（我猜测使用onclick事件），将更改与该团队成员对应的变量值。例如，如果我点击比尔·盖茨的图片，在另一个div中，我需要让一个变量（假设为Name）的值更改为比尔·盖茨。然后，如果我点击史蒂夫·乔布斯的图片，包含比尔·盖茨数据的变量将被史蒂夫·乔布斯的数据覆盖。我该怎么做？

- TheShadowbyte

Answer 1

假设标记如下所示：

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

JS Fiddle演示。

- David Thomas

Answer 2

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

- Elliott

Answer 3

希望这能帮到你。

<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>

- Iori

---

谢谢，这个可行。我不能给+1，因为我没有15的声望，但是等我可以了，我会这样做的。其他人也一样，谢谢。 - TheShadowbyte

它肯定能工作，但是当你想要改变和更新功能时，祝你好运去维护那些代码和更新函数调用（而不是“如果”）。 - David Thomas

Answer 4

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());
    });

});

- jtheman

---

是的，这是JavaScript，但值得一提的是它需要使用jQuery库。另外，为什么要用html()而不是text()呢？ - David Thomas

关于 jQuery 是正确的。良好使用 HTML 是因为如果用户想要包含标记数据，它应该起作用。另请注意，CSS 应该将 span 元素设置为 display="none"。 - jtheman