2 div應該打開2個不同的div

Question

對於標題感到抱歉，我不知道應該怎麼說更好（因爲我無法解決這個問題，我的大腦正在融化）。

這裏是我的問題的描述：

起初我有它的一個DIV與名稱的列表：

<div id="objekt1"> 
 
     <ul id="listeNamen"> 
 
      <li><a href="#"> Hans Mustername </a></li> 
 
      <li> Hans Mustername </li> 
 
      <li> Hans Mustername </li> 
 
     </ul> 
 
    </div>

當我點擊這個名字div，彈出第二個div box（＃objekt2），並提供關於我點擊的人的更多信息。如果你點擊這個＃objekt3（新的div盒）應該彈出，在這個div框中可能有更多細節的鏈接。

如果我已經點擊了＃objekt1中的鏈接並再次單擊它，不應該再添加任何div，對於＃objekt2也是如此。

現在我已經嘗試過使用jQuery，不幸的是它不能以它應該的方式工作。如果我單擊＃Objekt1中的鏈接2次，則會添加2個div。如果我單擊＃Objekt2中的鏈接，則不會添加div。

這裏是我的jQuery代碼如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

function checkDiv(){ 
     var anzahlDiv = $("div").length; 
     if (anzahlDiv == 1){ 
      $('<div id="objekt2"><a href="#">testlink #1</a></div>').insertAfter("#objekt1"); 
     }else if (anzahlDiv == 2){ 
      $('<div id="objekt3"><a href="#">testlink #2</a></div>').insertAfter("#objekt2"); 
     }else{ 
      return; 
     } 
      exit; 
    } 


    $('#objekt1 ul li a, #objekt2 a').click(function() { 
     checkDiv(); 
    }); 

是否有任何人在這裏誰可以幫助我在這一個嗎？ :(

Answer 1

我會通過向html添加一些數據屬性，然後處理那些廣義的JavaScript。它更具可讀性，如果數據發生變化，則無需修改代碼。

基本上我給鏈接添加了一個data-show屬性，這是鏈接被點擊時需要可見的div id的逗號分隔列表。

HTML：

<div id="objekt1"> 
    <ul id="listeNamen"> 
     <li><a href="#" class="infolink" data-show="john-info">John</a></li> 
     <li><a href="#" class="infolink" data-show="mary-info">Mary</a></li> 
    </ul> 
</div> 

<div id="john-info" class="infodiv"> 
    Info about John. 
    <a href="#" class="infolink" data-show="john-info,john-moreinfo">More info</a>  
</div> 

<div id="john-moreinfo" class="infodiv"> 
    More info about John. 
</div> 

<div id="mary-info" class="infodiv"> 
    Info about Mary. 
    <a href="#" class="infolink" data-show="mary-info,mary-moreinfo">More info</a>  
</div> 

<div id="mary-moreinfo" class="infodiv"> 
    More info about Mary. 
</div> 

CSS：

.infodiv { 
    display: none; 
} 

JS：

$("body").on("click", ".infolink", function (event) { 
    var dataShow = $(this).attr("data-show").split(",");   
    $(".infodiv").each(function (index, div) { 
     var divId = $(div).attr("id"), 
      visible = dataShow.indexOf(divId) !== -1; 
     $(div).toggle(visible); 
    }); 
    event.preventDefault(); 
}); 

這裏是一個工作demo jsfiddle。

Answer 2

既然你想爲不同的對象不同的動作，你應該有目前存在的功能，例如：

.... 
    //Based on your curent code 

function for_objekt1() 

    if (anzahlDiv == 1){ 
     $('<div id="objekt2"><a href="#">testlink #1</a></div>').insertAfter("#objekt1"); 
    }else if (anzahlDiv == 2){    
     $('objekt2').remove(); 
     if (anzahlDiv == 3){ 
      $('objekt3').remove(); 
      ... 
      } 
     } 
... 

或類似

Answer 3

櫃面，如果你有更少的div顯示，那麼你可以像這樣的東西

<div id="objekt1"> 
      <ul id="listeNamen"> 
       <li><a href="javascript:void(0);" onclick="first()"> Hans Mustername </a></li> 
       <li> <a href="javascript:void(0);" onclick="second()">Hans Mustername </a> </li> 
       <li> Hans Mustername </li> 
      </ul> 
     </div> 
    <div id="test"></div> 
<script type="text/javascript"> 
function first(){ 
$('#test').html(""); 
$('#test').html('<a href="">or any thing you want</a>'); 
} 

function second(){ 
$('#test').html(""); 
$("#test").html("other thing you want" 
)}; 
</script> 

如果您有動態內容，您可以創建一個函數並將其ID傳遞給函數，並根據需要更改div的內容喜歡。它可能不會解決問題，但希望它會有所幫助:)