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框（＃objekt2），其中包含有关我点击的人的更多信息。在这个div框中可能会有更多细节的链接，如果你点击这个＃objekt3（新的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的内容。它可能无法解决问题，但希望它足够有用:)

2个div应该打开2个不同的div

3 个答案: