Question

HTML

<div class="r dd-menu-container fs18" id="header-status">
  <a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
       <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
                    </span>&nbsp;ONLINE
    <span class="icon-down-dir"></span>
  </a>
  <ul class="dd-menu">
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/away.png"></span>&nbsp;AWAY</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/inacall.png"></span>&nbsp;IN A CALL</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/inabreak.png"></span>&nbsp;IN BREAK</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/online.png"></span>&nbsp;ONLINE</a>
    </li>
    <li>
      <a href="#"><span><img src="{{STATIC_URL}}img/crm/offline.png"></span>&nbsp;OFFLINE</a>
    </li>
  </ul>
</div>

的Javascript

menuApp = Backbone.View.extend({
  el: $('nav, #header-middle, #header-status'),
  events: {
    'click .dd-menu li a': 'optionChange',
  },
  optionChange: function(e) {
    var $a = $(e.currentTarget);
    var $img = $a.find('img');
    var selectedItemText = $a.text();
    var
      selectedItemSrc = $img.attr('src');
    $("#availability").text(selectedItemText);
    $("#availabilityImage").attr('src', selectedItemSrc);
  }
});

当我点击菜单并选择例如带有绿球的“在线”时，我希望从这段代码中更改它的img。

$("#availabilityImage").attr('src', selectedItemSrc);

但它不会改变我的img，它只会改变文本。你对我的问题有任何想法吗？

由于

Answer 1

问题在于：

<a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
    <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
    </span>&nbsp;ONLINE<span class="icon-down-dir"></span>
</a>

#availabilityImage 在 #availability内，所以当你这样做时

$("#availability").text(selectedItemText);

您完全删除了图片，因此下一行无效，因为img元素不再位于DOM中。

选项：

将#availabilityImage 移到 #availability之外。

在要更改的文本周围加上span，例如：

<a href="#" id="availability" class="dd-trigger" style="display: block; padding: 10px;">
    <span>
    <img id="availabilityImage" src="{{STATIC_URL}}img/crm/online.png">
    </span>&nbsp;<span class="text">ONLINE</span><span class="icon-down-dir"></span>
    <!-- Note ---^^^^^^^^^^^^^^^^^^^------^^^^^^^    -->
</a>

...然后再做

$("#availability .text").text(selectedItemText);

只替换该范围内的文字。

Answer 2

简单地说，我用更少的代码解决了它;

    optionChange: function(e) {
    var selectedElm = $(e.currentTarget).clone();
    $("#availability").html(selectedElm);
    $(this.dd_menu).removeClass('selected');
}

谢谢:)

改变img的来源

HTML

的Javascript

2 个答案: