java - 根据用户输入更新网页

Question

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

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

如果可能的话，我更喜欢使用 javascript 来做到这一点。如果存在任何指向现有模板的链接，我将不胜感激。

亲切的问候

Answer 1

这样的事情很容易做到：

演示：http: //jsfiddle.net/WXgRP/

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 通过标签名称获取页面中的所有元素，您可以随意修改它以获取我的类名、属性、id

[].forEach.call给出NodeListforEach的this值，因此在每个循环中您都可以访问它们的属性，每个循环设置a链接以将innerHTML元素的 设置为您提供给链接的文本。

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。