通过输入标题更改jQuery图像

Question

使用select下拉菜单，我可以用value=的onchange内容替换主图像“”

<select name="dropper" id="dropper">
<option value="pl2.jpg" title="pl2.jpg">Design 2</option>
<option value="pl4.jpg" title="pl4.jpg" >Design 4</option>
</select>

<div id="SWAPview"></div>

使用

$(document).ready(function() {
$("#dropper").change(function() {
    var src = $(this).val();

    $("#SWAPview").html(src ? "<img src='" + src + "'>" : "");
    });
});

在实时脚本中，我不能使用value="“，所以我查看了title="”属性，但仍在原地打转。非常感谢您的帮助。

Answer 1

可以通过prop或attr访问元素属性值。正如您敏锐地注意到的，val属性不再有效，因为select元素不接受选项的标题。相反，您可以使用:selected搜索其子对象并对所选对象进行过滤。不过，在检索之前，您需要获取select选项。

$("#dropper").change(function() {
    var src = $(this).children('option').filter(':selected').prop('title'); //jquery 1.7+
    var src = $(this).children('option').filter(':selected').attr('title'); //jquery < 1.7

    $("#SWAPview img").prop('src', src);
});

我根据来自jQuery文档的反馈更新了我的答案。

因为:selected是一个jQuery扩展而不是CSS规范的一部分，所以使用:selected的查询不能利用原生DOM querySelectorAll()方法提供的性能提升。要在使用:selected选择元素时获得最佳性能，首先使用纯CSS选择器选择元素，然后使用.filter(“：selected”)。

Answer 2

尝试以下代码：

<select>
    <option value="1" data-x="image-1.jpg">Iran</option>
    <option value="2" data-x="image-2.jpg">Irak</option>
    <option value="3" data-x="image-3.jpg">Afganistan</option>
</select>

$('select').find('option').click(function()
{
    var image = $(this).attr( 'data-x' );
    $('#content').empty().append('<img style="display:none" src="+ image +" title="Thumb" alt="Thumb"/>');

    //Load and Show
    $('#content').find('img').load(function(){
        $(this).fadeIn(250);
    });

});

请阅读：http://ejohn.org/blog/html-5-data-attributes/