Question

我有一个带有选项的选择列表。在更改选项的情况下，我希望更改图像。

我的代码不起作用。我认为原因是我想在var imgsrc = data（'divid'）

中获取图片的正确网址

有人可以帮忙吗？

    $(document).ready(function(){
    	$("#inp_exercise_id").change(function(){
    		var imgsrc = $(this).data('divid');
    		$('.image-swap').attr("src",imgsrc);
    	});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="" class="image-swap" style="float: right;">
    
    
    <p>
    <b>&Oslash;velse:</b> <br />
    <select name="inp_exercise_id" id="inp_exercise_id">
    	<option data-divid="../_uploads/exercises/no/strength/arms/triceps_nedtrekk_tau_i_kabel/triceps_nedtrekk_tau_i_kabel_2_guide_1_thumb_medium.png" value="2">Triceps nedtrekk tau i kabel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/biceps_curl_med_ez_stang/biceps_curl_med_ez_stang_3_guide_1_thumb_medium.png" value="3">Biceps curl med EZ stang</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/bicepscurl_med_hantler/bicepscurl_med_hantler_4_guide_1_thumb_medium.png" value="4">Bicepscurl med hantler</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/hammercurl_med_hantler/hammercurl_med_hantler_23_guide_1_thumb_medium.png" value="23">Hammercurl med hantler</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/liggende_tricepspress/liggende_tricepspress_31_guide_1_thumb_medium.png" value="31">Liggende tricepspress</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/franskpress/franskpress_37_guide_1_thumb_medium.png" value="37">Franskpress</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/en_arms_bicepscurl_med_hantel/en_arms_bicepscurl_med_hantel_40_guide_1_thumb_medium.png" value="40">En arms bicepscurl med hantel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/en_arms_tricepspress_med_hantel/en_arms_tricepspress_med_hantel_41_guide_1_thumb_medium.png" value="41">En arms tricepspress med hantel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/biceps_curl_med_ez_stang_over_benk/biceps_curl_med_ez_stang_over_benk_43_guide_1_thumb_medium.png" value="43">Biceps curl med EZ stang over benk</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/triceps_nedtrekk_stang_i_kabel/triceps_nedtrekk_stang_i_kabel_55_guide_1_thumb_medium.png" value="55">Triceps nedtrekk stang i kabel</option>
    	<option data-divid="../_uploads/exercises/no/strength/arms/bicepspress_med_strikk/bicepspress_med_strikk_72_guide_1_thumb_medium.png" value="72">Bicepspress med strikk</option>
    </select>
    </p>

谢谢！

Answer 1

只要我们不是在谈论悬停，而是实际上只是选择一小会儿就可以。

$(document).ready(function(){
    $("#inp_exercise_id").change(function(){
        var imgsrc = $(this).children("option:selected").attr("data-divid");
        $('.image-swap').attr("src", imgsrc);
    });
});

Answer 2

要实现悬停时的更改，您需要一个自定义的选择插件。

由于跨源问题，我不得不更改图像的网址。

您的代码无效，因为您需要选择option元素。更改事件的目标元素是选择标签。但是您可以使用this.value从select元素中获取选定元素的值：

$(document).ready(function(){
    $("#inp_exercise_id").change(function(){
        var opt = $('option[value='+this.value+']', this);
        var divid = opt.data('divid');
    	$('.image-swap').attr("src",divid);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="inp_exercise_id" id="inp_exercise_id">
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Triceps&w=350&h=250" value="2">Triceps nedtrekk tau i kabel</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Biceps&w=350&h=250" value="3">Biceps curl med EZ stang</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Bicepscurl&w=350&h=250" value="4">Bicepscurl med hantler</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Hammercurl&w=350&h=250" value="23">Hammercurl med hantler</option>
  <option data-divid="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Liggende&w=350&h=250" value="31">Liggende tricepspress</option>
</select>
<img src="" class="image-swap" style="float: right;">

选择中的更改时更改图像选项

2 个答案: