javascript 单击时获取所选锚标记的 id 并相应地设置另一个 div 的 html

Get id of selected anchor tag on click and set html of another div accordingly

提问by Dexter Schneider

I have 3 anchor (a) tags, all sharing a single div element to act upon. See my html below. Basically, when you click on anchor tag 1, I want it to fill the div with id="fillDiv" with html. When you click the second anchor tag, it should wipe that #fillDiv and replace it with new html. How do I set up such a functions. Here is my attempt

我有 3 个锚 (a) 标签，所有标签都共享一个 div 元素以进行操作。请参阅下面的我的 html。基本上，当您单击锚标记 1 时，我希望它用 id="fillDiv" 用 html 填充 div。当您单击第二个锚标记时，它应该擦除 #fillDiv 并将其替换为新的 html。我如何设置这样的功能。这是我的尝试

HTML:

HTML：

<div>
<a id="a1" href="javascript: changeDiv();">tag1</a>
<a id="a2" href="javascript: changeDiv();">tag2</a>
<a id="a3" href="javascript: changeDiv();">tag3</a>
</div>

<div id="fillDiv"></div>

JS:

JS：

function changeDiv(){
     if changeDiv().is('#a1'){
         document.getElementById('fillDiv').html('<div>filling 1</div>');
         }

     elseif
         changeDiv().is('#a2'){
         document.getElementById('fillDiv').html('<div>filling 2</div>');
         }

     elseif
         changeDiv().is('#a3'){
         document.getElementById('fillDiv').html('<div>filling 3</div>');
         }
}

Please NOTE: I do not want to use a show/hide div function, it is important to me that the filling Div is only a single div, not coupled with 2 other divs having display:none properties at start.

请注意：我不想使用显示/隐藏 div 功能，重要的是填充 Div 只是一个 div，而不是与其他 2 个在开始时具有 display:none 属性的 div 相结合。

Any help appreciated

任何帮助表示赞赏

Thank you

谢谢

回答by Ashwin

Your html remains the same, just remove onclickevent and try below js -

您的 html 保持不变，只需删除onclick事件并尝试下面的 js -

$("a").click(function(){
   if($(this).attr("id") == "a1") {
      $("#fillDiv").html("<div>filling 1</div>")
   }
   else if($(this).attr("id") == "a2") {
      $("#fillDiv").html("<div>filling 2</div>")
   }
   else if($(this).attr("id") == "a3") {
      $("#fillDiv").html("<div>filling 3</div>")
   }
});

Here is the fiddle - http://jsfiddle.net/ashwyn/cPZfX/

这是小提琴 - http://jsfiddle.net/ashwyn/cPZfX/

If your id are gonna be like a1, a2, a3then you make a loop and do more optimization.

如果你的 id 会像a1, a2, a3那么你做一个循环并做更多的优化。

回答by Interfector

The code bellow follows your example, but you can make it more generic, based on the id.

下面的代码遵循您的示例，但您可以根据 id 使其更通用。

var element;
var handler = function( event ) {
    var target = document.getElementById('fillDiv');
    switch this.id {
       case 'a1':
         target.html('<div>filling 1</div>');
         break;
       case 'a2':
         target.html('<div>filling 2</div>');
         break;
       case 'a3':
         target.html('<div>filling 3</div>');
         break;
    }
};
for ( var i = 1; i <= 3; i++ ) {
  element = document.getElementById( 'a' + i );
  element.addEventListener( 'click', handler );
}