Question

我需要这个脚本才能真正发挥作用。一整天都在努力解决这个问题。基本上，每当您单击列表中的示例时，它都需要更新普通背景或悬停背景（作为用户选择）。但它需要ID，所以我可以添加链接作为新的示例，所以每当我添加一个带有值的新名称时，它就需要成为一个新的例子。

它有相同的脚本，但两次。一个用于普通bg，一个用于悬停。

还有一个列表显示/隐藏脚本，我还没弄清楚如何工作，我不是一个javascript脚本编写者，但我设法在几个小时内得到它。

我真的需要一些帮助，如果你帮助我，我将不胜感激。谢谢。 /爱德华

jsfiddle.net/5tq2Y这是小提琴。但由于某种原因它不会起作用

js：

<script type="text/javascript">
function change_bg(){
    document.getElementById('button_bg').value = 'BY THE DIFFRERENT <A> NAMES';
}
function change_bg_hover(){
    document.getElementById('button_bg_hover').value = 'BY THE DIFFRERENT <A> NAMES';
}
</script>

需要更新的输入：

<input type="text" id="button_bg" name="button_bg" value="">
<input type="text" id="button_bg_hover" name="button_bg" value="">

html：

<b>Show/Hide Background examples list</b><br />
<a id="changer" name="images/examples/1.jpg" onclick="change_bg()"><u>Example 1 Red</u></a><br />
<a id="changer" name="images/examples/2.jpg" onclick="change_bg()"><u>Example 2 Blue</u></a><br />

<b>Show/Hide HOVERED Background examples list</b><br />
<a id="changer" name="images/examples/1_hovered.jpg" onclick="change_bg_hover()"><u>Example 1 Blue Hover</u></a><br />
<a id="changer" name="images/examples/2_hovered.jpg" onclick="change_bg_hover()"><u>Example 2 Red Hover</u></a><br />

Answer 1

我做了一个小工作http://jsfiddle.net/juzVG/2/ 请检查这是否是你想要的。

我还对代码做了一些修改。

<a href="#" id="changer" name="images/examples/1.jpg" onclick="change_bg();return false;">Example 1 Red</a><br />
<a href="#" id="changer" name="images/examples/2.jpg" onclick="change_bg();return false;">Example 2 Blue</a><br />

<b>Show/Hide HOVERED Background examples list</b><br />
<a href="#" id="changer" name="images/examples/1_hovered.jpg" onclick="change_bg_hover();return false;">Example 1 Blue Hover</a><br />
<a href="#" id="changer" name="images/examples/2_hovered.jpg" onclick="change_bg_hover();return false;">Example 2 Red Hover</a><br />

Answer 2

对于初学者，您can't have multiple elements with the same id value，因此id="changer"必须更改。我建议class="changer"。

编辑：我实际上给了他们唯一的ID，因此您可以查看它们在固定代码中检索其属性的复杂方法。如果您希望他们共享css或javascript定位的常用规则，我仍然建议class="changer"。

我认为你想拥有的是：

用户点击链接。
不同元素的背景更改
更改内容取决于所点击链接的name属性中的内容。

如果这是准确的，那么，我甚至不知道如何在没有jquery的情况下干净利落地做到这一点。试试html：

<a href="#" id="changer1" name="images/examples/1.jpg" onclick="change_bg(document.getElementById('changer1'))"><u>Example 1 Red</u></a><br />
<a href="#" id="changer2" name="images/examples/2.jpg" onclick="change_bg(document.getElementById('changer2'))"><u>Example 2 Blue</u></a><br />

这适用于javascript

function change_bg(elem){
    document.getElementById('button_bg').value = elem.name;
}
function change_bg_hover(elem){
    document.getElementById('button_bg').value = elem.name;
}

小提琴：http://jsfiddle.net/aGCNn/

询问如何使用jQuery，你会喜欢这个答案。我保证！

用于通过<a> name element</a>更改输入值的Javascript简单脚本

2 个答案: