html中的按钮功能可以改变css图像标签？

Question

为了更广泛地提出我的问题，如何创建一个能够读取值，更改图像源，然后逐步增加另一个值的函数？什么是最好的将是一个教我或如果你解释它的地方的参考...我的目标使用这种知识将是实现这一目标：

这是具体的，但不是必需的，但如果你能记住我的答案，那么它会让我大吃一惊！ ：D左侧是带有文本框的表，用户将在国家/地区名称中输入文本框。我希望用户能够单击按钮，其中显示“下一个发言者”，并选择一个文本框并更改联合国旗帜下方文本框的值以填写该国家/地区名称，并使该国家的国旗出现（假设标志都被命名为相同的国家名称）。

<img src='flags/(Whatever the selected text box says).svg'>

Answer 1

这在Javascript中非常简单，只需要几个步骤。首先，根据其包含div的id选择图像：

var flagImage = document.querySelector('#flagarea > img');

然后，通过相同的过程选择输入，并获取当前所选国家/地区的名称：

var flagSelect = document.querySelector('#flagarea > input');
var currentSelection = flagSelect.value;

最后，更改src属性：

flagImage.src = 'flags/' + currentSelection + '.svg';

您将此标记为jQuery，但我认为通过jQuery执行此操作并不比通过基本DOM方法更简单。但是，如果jQuery是你想要的，这里有一个如何做同样的例子：

var $flagImage = $('#flagarea > img');
var $flagSelect = $('#flagarea > input');
var currentSelection = $flagSelect.val();
$flagImage.attr('src', 'flags/' + currentSelection + '.svg');

您需要确保所有图片都具有相同的宽高比，否则布局可能会根据所选的标记而发生显着变化。

Answer 2

要使用jquery更改图像源，只需使用You don't really need this module

.attr()

以下是文档：http://api.jquery.com/attr/