我该如何实现允许根据所选图像（在本例中基于锚定链接）自动填充隐藏字段值的功能，以便在提交此菜单中的表单时传递该值。我认为，如果有人想恶意地在提交链接之前编辑#之后的值，那么在下一页上重新生成锚定链接可能会有点问题。在这种情况下，我希望如果第一个选项被点击，第二个选项的内容，等等（基本上它填充了当前锚定链接中的任何内容）
菜单代码-
<div id="feedback-topic.buttons">
<a href="#bug"><img src="lib/feedback-bug_off.jpg" alt="bug" width="75" height="49" border="0" class="img-swap" /></a>
<a href="#content"><img src="lib/feedback-site_content_off.jpg" alt="site_content" width="121" height="49" border="0" class="img-swap" /></a>
<a href="#suggestion"><img src="lib/feedback-suggestion_off.jpg" alt="suggestion" width="117" height="49" border="0" class="img-swap" /></a>
<a href="#compliment"><img src="lib/feedback-compliment_off.jpg" alt="compliment" width="120" height="49" border="0" class="img-swap" /></a>
<a href="#checkout"><img src="lib/feedback-checkout_off.jpg" alt="checkout" width="107" height="49" border="0" class="img-swap" /></a>
<a href="#other"><img src="lib/feedback-other_off.jpg" alt="other" width="83" height="49" border="0" class="img-swap" /></a>
</div>
jQuery代码-
// Allows for only one feedback topic to be selected
$(function(){
$(".img-swap").live('click', function() {
this.src = this.src.replace('_off', '_on');
$('.img-swap').not(this).attr('src', function(index, attr) {
return attr.replace('_on', '_off');
});
});
});
- 查找活动图像
- 使用$（this）.attr（"href"）获取"#link"部分
- 使用.substr（1）函数去掉散列
- 使用.val（value）jQuery函数可以根据3设置表单元素的值
在click事件处理程序内部：
$(this).parent().attr('href')
为您提供href，如果您愿意，您可以使用#，只需添加一个输入字段并使用.val() 设置其值
在每个链接上添加CSS并切换样式（或者您想预加载图像？）：
CSS
#bug{background:url('lib/feedback-bug_off.jpg');}
#bug.a{background:url('lib/feedback-bug_on.jpg');}
jQuery
$("div#feedback-topic.buttons a").live('click',function(){
$("div#feedback-topic.buttons a.a").removeClass("a");
$(this).addClass("a");
return false;
});
我建议使用此任务的专用HTML元素-单选按钮。这不需要任何javascript编程，检查/未检查状态的图像可以很容易地用CSS添加。请参阅选中单选按钮的CSS选择器'；s标签作为示例。