时间戳

首页 > 解决方案 > 在选择中更改选项时更改图像

javascript - 在选择中更改选项时更改图像

问题描述

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

我的代码不起作用。我认为原因是我想在 var imgsrc = data('divid') 中获取图像的正确 url

任何人都可以帮忙吗？

    $(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>

谢谢！

标签： javascriptjqueryimage

解决方案

只要我们不是在谈论悬停，而是实际上选择只是短暂的片刻，就可以了。

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

推荐阅读