Question

我有这个HTML标记：

<img id="image" alt="Eye Lights Liners" title="Eye Lights Liners" src="http://kg.devserver/image/cache/data/llipsplatsqpkgmn-228x228.jpg">

<select name="option[227]" id="option_select">
  <option value=""> --- Please Select --- </option>
  <option data="http://kg.devserver/image/cache/no_image-50x50.jpg" value="19">Black Knight</option>
  <option data="http://kg.devserver/image/cache/no_image-50x50.jpg" value="18">Angel</option>
  <option data="http://kg.devserver/image/cache/no_image-50x50.jpg" value="17">Amorous</option>
  <option data="http://kg.devserver/image/cache/data/42llpkgmn-50x50.jpg" value="20">Vegas Volt</option>
</select>

首先我不知道我是否可以随心所欲地使用“数据”如果有错，请指出我正确的方向。然后跟着问题我想用select＃option_select中数据值的值改变img #image src。为此，我制作了这个jQuery代码：

$('#option_select').change(function(e){
    $('#image').attr('src', $(this).attr('data'));
});

但它不起作用。为什么呢？

Answer 1

您的数据属性无效，data-arbitraryName。

<option data-src="http://kg.devserver/image/cache/no_image-50x50.jpg" value="19">Black Knight</option>

$('#image').attr('src', $(':selected', this).data('src'));

请注意，this指的是您的选择元素而不是选项，您可以使用:selected选择器。

事件不会在更改时触发，错误在哪里

1 个答案: