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如果用于替换整个元素。

Answer 2

您的主播没有data-src属性且没有src属性（这是我认为您实际想要获得的），请尝试选择图像并获取其src属性

optionChange: function(e) {
    var selectedItemText = $(e.currentTarget).text();
    var selectedItemSrc = $(this).find('img').attr("src"); 
    console.log(selectedItemSrc); 
    $("#availability").text(selectedItemText);
    $("#availabilitySRC").attr("src", selectedItemSrc); 
}

https://api.jquery.com/data/
https://api.jquery.com/attr/

从li标签获取图像源

2 个答案: