Question

我有一个非常简单的问题，我正在寻找一个hello-world类型的教程：

我的目标是根据外部因素改变网页的一部分。所以，在这个例子中，在网站上有一个文本块，上面写着“Apple”。如果单击“Banana”按钮，该文本现在显示“Banana”，如果按下“Pear”按钮，则会显示“Pear”。

如果可能，我更愿意使用javascript。如果它们存在，我会很感激预先存在的模板的链接。

亲切的问候

Answer 1

这样的事情很容易就像：

HTML：

<p id='changeme'>Blah</p>
<a href='#'>Banana</a>
<a href='#'>Apples</a>

JS：

el = document.getElementsByTagName('a');
[].forEach.call(el, function(ele, index, arr) {
    ele.onclick = function() {
        document.getElementById('changeme').innerHTML = ele.innerHTML;   
    }
});

那么这样做，是el通过标签名称获取页面中的所有元素，您可以根据需要修改它以获取我的classname，attribute，id

[].forEach.call给出了NodeList的forEach this值，因此在每个循环上都可以访问它们的属性，每个循环设置a链接以设置{{ 1}}一个元素到你给链接的文本。

Answer 2

这个问题可以通过简单的网络搜索来解决，但我会发布一个答案，因为SO倾向于在结果中排名很高。

这是一些HTML：

<label><input type="radio" value="Apple" name="fruit"/>Apple</label>
<label><input type="radio" value="Banana" name="fruit"/>Banana</label>
<label><input type="radio" value="Pear" name="fruit"/>Pear</label>
<h1 id="selection"></h1>

这是JavaScript（使用jQuery）：

$('input').bind('click', function () {
    $('#selection').html(this.value);
});

请注意，如果这是您需要做的唯一事情，我不会使用jQuery，但如果您的网站有很多交互方面，那么jQuery将使您的生活更轻松。

JavaScript执行以下操作：

为所有输入元素分配一个事件处理程序，以便在单击它们时调用该函数。

输入在单击时调用该函数，因此this引用输入，其值包含水果的名称。

$('#selection')表示其id属性为“selection”的DOM元素。这是我们案例中的标题h1。

.html方法在传递参数时，会将参数（this.value）赋给标题元素的内部HTML。

根据用户输入更新网页

2 个答案: