Question

我试图隐藏所有页面并在用户点击.glossnav a时随时显示特定页面我的自定义属性page=""等于我想要显示的页面的ID。

关键地执行此操作的最佳方法是什么，以便我可以在其他.words div中复制此导航功能？

我需要找到父母的兄弟姐妹，id等于我的page。我将如何构建jQuery来实现：

$(".glossNav a").on('click', function(){

});

这是我的HTML：

<div class="words" id="glossary-C">
    <div id="c-page-1" class="glossPage">
        <span class="glossBlock">
            <strong>Calltime</strong> - The time at which a model must be at the location and ready to work.
        </span>
        <span class="glossBlock">
            <strong>Call Back / Recall</strong> - after the first casting a callback or recall is held to narrow down the selection process. It is not unusual to get a callback before getting a job or being turned down.
        </span>
        <span class="glossBlock">
            <strong>Casting</strong> - Castings are notices of modeling jobs which are made to models, casting agencies, or on modeling websites. They show details of the types of models required for an upcoming production. This could mean a call where every model can apply or a date on which (preselected) models introduce themselves to the client, who will then make the final decision. The client sets the requirements and makes his/her choice.
        </span>
        <span class="glossBlock">
            <strong>Casting Agency</strong> - Casting agencies are agencies specialized in finding talented people for different fields like modeling, singing, acting, dancing and others. They work similarly to scouts. They search for perspective persons that could participate in different kinds of projects like TV, photo, video, advertisement casting and others. Usually the models in a casting agency don’t have an exclusive contract and can work for different agencies.
        </span>
        <span class="glossBlock">
            <strong>Casting Detail Sheet</strong> - Information sheet for the model, which contains all important information about a casting: call time, direction, client etc.
        </span>
        <span class="glossBlock">
            <strong>Catwalk/Runway</strong> - Catwalk or runway describes a narrow, usually elevated platform that runs into an auditorium, used by models to demonstrate clothing and accessories during a fashion show.
        </span>
    </div>
    <div id="c-page-2" class="glossPage">
        <span class="glossBlock">
            <strong>Close Up</strong> - In film, television or photography a close-up tightly frames a person or an object. Close-ups are one of the standard shots used regularly along with medium shots and long shots.
        </span>
        <span class="glossBlock">
            <strong>Composite Card</strong> - Also referred to as a comp card, sedcard, (zedcard) or model business card. A composite card is a piece of card which is printed with at least two photos of you in various poses, settings, outfits and looks (the widest variety possible). It includes your name, your contact information, usually your agency's info and all your stats. Comp cards come in lots of different formats depending on the city, agency and the type of model you are. Agencies will usually issue comp cards for you after they sign you. A composite card serves as the latest and best of a model’s portfolio and is used as a business card.
        </span>
        <span class="glossBlock">
            <strong>Copyright</strong> - Copyright is the set of exclusive rights granted to the author or creator of an original work, including the right to copy, distribute and adapt the work. These rights can be licensed, transferred and/or assigned.
        </span>
        <span class="glossBlock">
            <strong>Cover Shooting</strong> - A photo shooting for a cover of a magazine. Depending on the magazine it has great significance for the awareness of the model.
        </span>
        <span class="glossBlock">
            <strong>Cuttings</strong> - Documented releases of a model in magazines, catalogs or other Medias.
        </span>
    </div>
    <div class="glossNav">
        <a href="javascript:void(0)" page="c-page-1">1</a>
        <a href="javascript:void(0)" page="c-page-2">2</a>
    </div>
</div>

Answer 1

$('.glossNav a').on('click', function() {
    var $this = $(this),
        $selected = $('#' + $this.attr('page'));

    $this.closest('div.glossNav').siblings().hide();
    $selected.show(); 
});

同样如未建议的那样，当属性无效时，最好使用 HTML-5数据 - 属性*。

jQuery - 儿童，父母，兄弟姐妹的难题

1 个答案: