简单的JavaScript问题 - 链接按钮状态到图像交换？

Question

我知道这是一个真正的新手问题，但这就是我的意思！我一直在玩ajax，当我按下两个按钮时，我将这两个图像交换。

问题：在显示相应图像时，如何使按钮显示活动状态？

我确定我需要做一些像在图像上设置id的东西，但除此之外，我不确定......

我的代码（我没有显示使图像交换的ajax内容，因为我怀疑你也需要它）：

<div class="wrapper">
<div class="transcriptionbuttons">
    <ul class="transcript">
      <li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li>
      <li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li>
    </ul>
</div>
<div class="transcriptimage" id="targetDiv">
  <img src="this gets populated with ajax..." alt="">
</div>
</div>

谢谢！ 乔尔

编辑： 对不起，不清楚。列表项是按钮。单击列表项，然后在targetDiv中加载图像。我希望“活动”的按钮保持活动状态。

Answer 1

如果我理解了这个问题......你可以，例如，

<img id="targetImg" src="this gets populated with ajax..." alt="">

并在您的JavaScript回调中

document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");

修改
如果您想要在点击时更改<a>标记，则可以......

<li class="transcript">
   <a class="transcriptionhorbutton" 
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>

并将this传递给一个能够进行所需更改的函数（不可否认，该部分有点不清楚）

编辑2

<li class="transcript">
   <a id="transcriptionhorbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
   <a id="transcriptionvertbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>

<script>

var buttons = [ document.getElementById("transcriptionvertbutton"), 
                document.getElementById("transcriptionhorbutton")];

function make_active(el) {
  deactivate_buttons();
  el.setAttribute("class","active");
}

function deactivate_buttons() {
  buttons[0].setAttribute("class","inactive");
  buttons[1].setAttribute("class","inactive");
}
</script>

这不是最漂亮的解决方案，但它可以让您了解如何解决问题