Question

我一直试图在我的Rails 4应用程序中实现HTML图像映射。图像地图是人体肌肉系统。目标是让用户点击热点以选择目标肌肉群。目标肌肉群在下拉菜单中，可以正常工作。我的目标是通过将下拉菜单选项与图像映射上的热点相关联来改善用户体验。

肌肉群收集的HTML（下拉菜单）是：

<div class="field">
<%= f.label :muscle_group %><br />
<%= f.collection_select :muscle_group_id, MuscleGroup.order(:name), :id, :name, prompt: "Choose your target muscles", include_blank: false %>
</div>

下拉菜单的源代码是：

<select id="strength_exercise_muscle_group_id"
 name="strength_exercise[muscle_group_id]"><option value="">Choose your target muscles</option>
<option value="11">Abs - rectus abdominis</option>
//more options
</select>

图像映射的HTML代码是：

<div class="Anatomy" style="position: relative;">
<%=image_tag("muscles_anterior_front view_pubic domain - Copy.png", :usemap => "#musclesfrontview") %>
<map name="musclesfrontview" style="height: 1100px; display: inline-block; position: absolute; left: 0px; top: 0px; width: 919px;">
  <area shape="rect" coords="335,404,422,580" alt="Abs" href="#" id="map_abs"/>
  <area shape="default" href="" />
  //more areas
</map>
</div>

为了测试图像映射，我创建了以下jQuery代码：

$(document).ready(function() {
$("#map_abs").click(function(event){
    $('#strength_exercise_muscle_group_id option:selected').val();
})
});

当我点击Firefox中的“abs”热点区域时，似乎没有任何事情发生。使用Firebug，我能够突出显示图像上的“abs”热点，因此图像地图上的区域坐标看起来是正确的。我怀疑我的jQuery代码有问题。由于某种原因，click事件未触发。我究竟做错了什么？如何修复代码以使我的图像映射工作？我很感激任何帮助。

Answer 1

你非常接近！你只需要设置选择的值，其abs值为11，如下所示：

$("#map_abs").click(function (event) {
   $('#strength_exercise_muscle_group_id').val(11);
});

如果您正在侦听选择中的更改事件，则可以通过执行$('#strength_exercise_muscle_group_id').trigger('change')更改值来触发更改事件。希望这会有所帮助。

Answer 2

这对我有用：

$("#map_abs").click(function(){
    var absID = 11;
    var muscle_group = $("#strength_exercise_muscle_group_id option[value='" + absID + "']").attr("selected","selected");

无法让jQuery通过图像映射从下拉菜单中选择一个选项

2 个答案: