Question

我对JQuery有点新意，如果对这个问题有明显的答案，请道歉。

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

z-index还有两个段落：1和z-index：0仍然是隐藏的。每当用户使用下一个更高的z-index拖动可见段落时，我希望每个段落都可以连续显示。但是，我不知道如何让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
    }
});
    });

我可以在jquery中使用z-index来确定.show（）的顺序吗？

1 个答案: