我可以在jquery中使用z-index来确定.show()的顺序吗?

Question

我对JQuery有点陌生，所以如果这个问题有一个明显的答案，我很抱歉。

我正在尝试为我的网站创建一个"关于我"的页面。我在这一页上有几段都占据了相同的位置。最初，只有带有z-index: 3的顶部段落是可见的。其他设置为:none。当第一个段落被拖拽时，下一个段落的z-index: 2就可见了。你可以在这里看到:http://www.clare-eileen-callahan.com/aboutme/

还有两个z-index: 1和z-index: 0的段落仍然被隐藏。我希望在用户每次拖动具有下一个更高z索引的可见段落时，每个段落都依次变为可见。然而，我不确定如何让jquery做到这一点。我猜有一些方法可以通过指示z-index来让每个段落一个接一个地出现…?

这是我的HTML:

<div>
            <p class="draggable" id="univText">I am a sixth year Ph.D. candidate in the Department of English at Duke University. My research examines late 19th to mid-20th century novels that trouble the relationship between representation and various forms of political and economic abandonment, particularly poverty and forms of working-class labor. My work incorporates Marxist geography, feminist and queer theory, and biopolitics. I have more recently begun to study media theory and digital knowedge. Move me to read more about my work as a "digital humanist."</p>
            <p class="draggable" id="webDevText">My interest in coding arose out of my participation, from 2012-2014, in the <a href="http://sites.fhi.duke.edu/phdlab/" target="_blank">PhD Lab in Digital Knowledge</a>, run out of the Franklin Humanities Center at Duke University. I began learning how to write code through <a href="www.codeacademy.com" target="_blank">Code Academy</a> and the <a href="http://thewc.co/" target="_blank">Women's Coding Collective</a>. I simultaneous began to study documentary photography at the <a href="http://documentarystudies.duke.edu/" target="_blank">Center for Documentary Studies</a>, also at Duke. Out of these two new fields of study, I became increasingly interested in multimedia and web development, as well as media theory. In the summer of 2014, I attened the <a href="http://sct.cornell.edu/" target="_blank">Summer School for Criticism and Theory at Cornell</a>, where I was a participant in a seminar on media theory. Relevant coursework includes classes and workshops in digital photography, web-based multimedia development, and multimedia documentary. You can also follow my progress at <a href="http://www.codecademy.com/clareeileen" target="_blank">Code Academy</a>. This about me page is mainly for the purpose of experimenting with jquery and javascript.</p>
            <p class="draggable" id="paraText">I am a USPA licensed skydiver with over 300 skydives. I began skydiving in 2003, and became a USPA rated Coach in 2014. I work with students who have graduated from AFF training, as well as with young licensed jumpers. I am a member of <a href="http://www.uspa.org/USPAMembers/SistersinSkydiving/tabid/551/Default.aspx" target="_blank">Sister's in Skydiving (SIS)</a>, an organization devoted to increasing the number of women in the sport and providing guidance to female jumpers new to the dropzone.</p>
            <p class="draggable" id="advMap">See my adventure map. <span id="click_me">&#x2192;</span></p>
            <iframe id="here_i_am" src="https://mapsengine.google.com/map/embed?mid=zYpTz5XLDQCk.kzQAVkxbygAE" width="350" height="350"></iframe>
        </div>

我的相关CSS:

#univText {
    position: absolute;
    color: #1a1a1a;
    text-align: justify;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin-top: 185px;
    margin-left: -125px;
    z-index: 3;
}
#webDevText { 
    position: absolute;
    color: #1a1a1a;
    text-align: justify;
    width: 300px;
    height: 320px;
    top: 50%;
    left: 50%;
    margin-top: 160px;
    margin-left: -150px;
    display: none;
    z-index: 2;
}
#paraText { 
    position: absolute;
    color: #1a1a1a;
    text-align: justify;
    height: 200px;
    width: 200px;
    top: 50%;
    left: 50%;
    margin-top: 200px;
    margin-left: -100px;
    display: none;
    z-index: 1;
}
#advMap {
    position: absolute;
    color: #1a1a1a;
    top: 50%;
    left: 50%;
    margin-top: 250px;
    margin-left: -75px;
    display: none;
    z-index: 0;
}
iframe {
    position: absolute;
    width: 350px;
    height: 350px;
    margin-left: 65%;
    margin-top: 50px;
    display: none;
}

和我目前的Jquery(我有"#webDevText"设置基本上是为了测试的目的，看看我是否能得到它的任何工作。我只是不知道从这里走到哪里):

$(function() {
    $(".draggable", this).draggable({ //makes text draggable
        stop: function() { //when user stops dragging
            $("#webDevText").show(); //action
        }
    });
        });

也可能有另一个不涉及z-index的答案。我对所有的选择都感兴趣。

Answer 1

用$("#webDevText").show();代替$(this).next().show();

解释:使用jquery选择器来识别元素是一个技巧。

在你的代码中，你已经使用了ID选择器#webDevText，每次你的代码将执行，它将搜索ID为webDevText的元素，并设置其属性display:block

现在您想要在拖动停止事件中显示每个下一个元素。因此，我们将使用来自jQuery的.next()选择器。每次当你拖动一个元素时，下一个元素将被设置为display: block。

你的代码应该如下所示:

$(function() {
$(".draggable", this).draggable({ //makes text draggable
    stop: function() { //when user stops dragging
        $(this).next().show(); //action - updated with new code
    }
});
    });