javascript - 从li标签获取图像来源

Question

我有这样的代码

<ul class="dd-menu">
                <li>
                    <a href="#"><span><img src="{{STATIC_URL}}img/away.png"></span>1</a>
                </li>
                <li>
                    <a href="#"><span><img src="{{STATIC_URL}}img/inacall.png"></span>2</a>
                </li><ul>

Javascript

menuApp = Backbone.View.extend({
el: $('#header-status'),
events: {
    'click .dd-menu li a': 'optionChange'
},
optionChange: function(e) {
    var selectedItemText = $(e.currentTarget).text();
    var selectedItemSrc = $(e.currentTarget).data("src"); 
    console.log($(e.currentTarget).data("src")); //Undefined
    $("#availability").text(selectedItemText);
    $("#availabilitySRC").attr("src").replace(selectedItemSrc); //Error
}});

我试图显示选定的 li，现在它显示选定的 li 的文本。但是，它不显示所选项目的图像。有没有办法获取img的src？

谢谢

Answer 1

获取src时出现的错误是您引用了一个标签。您必须引用 img 标签。为此:

optionChange: function(e) {
    var $a = $(e.currentTarget); // get a tag
    var $img = $a.find('img'); // find img in a tag
    var selectedItemText = $a.text(); // text from a
    var selectedItemSrc = $img.attr('src'); // src from img
    $("#availability").text(selectedItemText); // set text
    $("#availabilitySRC").attr('src', selectedItemSrc); // set src attr
}});

要从元素获取属性，请使用 attr('attribute-name') 函数。要更改属性值，请使用 attr('attribute-name', newValue)。 replace(如果用于替换整个元素)。