jquery - 进行切换检查是否一次切换多个项目

Question

我目前已为我的投资组合中的每件作品激活了切换功能。我想让它一次只显示一件作品（带有相应的图像）。现在，您可以单击多个图像，并且多个 div 显示在“您应该检查我的工作”的部分

<section id="displays">
    <div id="dragonupdisplay">
        <p><class id="blueText">You are viewing: DragonUp Wireframes </class><br>Role: User Experience Design<br><br>DragonUp is a game created by East Side Games for iOS and it is currently being ported over to Facebook. It is a game that draws inspiration from Dragonvale and Tiny Tower and has players building up a collection of dragons. Kotaku describes it as A dragon vomit harvesting game, and that makes all the difference.
            <br>
            <br>
            I was tasked with proposing a re-design of its UI. Currently, the game has 10 different options in the menu. With this in mind, my goal was to create a more streamlined menu for new users and more fluid navigation for experienced players. I was able to achieve this and accomplished having four different options in the menu while still containing the same functionality and increasing usability.</p>
            <img src="images/work/dragonup-wireframe1.png">
    </div>
    <div id="provincedisplay">
        <p><class id="blueText">You are viewing: Province Sports Wireframes</class><br>Role: User Experience Design<br><br>The Province is B.C's most successful newspaper. It is a source of news for almost everything going on locally and internationally. A major component of The Province is their Sports section. With an increasing number of people getting their newspaper delivered to them online I was tasked with proposing a re-designed website.
            <br>
            <br>
            There was plenty of focus made on creating an experience that is custom tailored to it's user and the sports and teams they enjoy reading about. Many new social features were implemented around this to provide an experience that is unparalleled to any other website. These features would instantly show users articles that they are interested in and show them the most recent stats and scores going on with their teams.</p>
            <img src="images/work/provincesports.png">
    </div>
    <div id="canucksdisplay">
            <p><class id="blueText">You are viewing: Canucks Usability Tests</class><br>Role: Usability Testing<br><br>The Vancouver Canucks is one of Canada's biggest sports teams, with a very strong and avid community. A lot of their community use their website to interact with each other about recent trades, rumours, and debates. 
            <br>
            <br>
            I was tasked with testing the usablity of Canucks.NHL.com's community features and social features. This involved in analyzing Canucks' target user and thinking of the potential downfalls the user may have while navigating the website and recording a test participant doing so. These tests ended up being successful in pointing out the uncovered flaws.</p>
            <img src="images/work/canucks1.png">
    </div>
    <div id="pencilmeindisplay">
                <p><class id="blueText">You are viewing: Pencil Me In Concepts</class><br>Role: Branding and Feature Design<br><br>Pencil Me In is an app that allows it's users to easily schedule appointments with other users and businesses. It is an app that is still being concieved and I was tasked with creating concepts of this app from scratch.
            <br>
            <br>
            The app's main intent was to create a booking system that was easier and faster than making a phone call. To do this a fluid three styep sstem was implemented: Users choose where they would like to book, they then choose if there is anybody in particular they would like to book, and confirm this. There were many obstacles to overcome in terms of privacy while providing such a simple experience in creating such a system and these were met.</p>
            <img src="images/work/pencilmein1.png">
        </div>
        <div id="attackdisplay">
            <p><class id="blueText">You are viewing: Attack of the Space Leprechauns</class><br>Role: Responsive Visual Design<br><br>Attack of the Space Leprechauns is a completely ficticous(or so I hope) event entailing an attack from leprechauns living in space attacking the earth. My goal creating this was to make a website that was completely responsive.
            <br>
            <br>
            The goal of this website was to tell an interactive story by creating advanced vector graphics that would adapt over all displays whether it be phones, tablets, or desktop. The size placement of images varied between each of these layouts to an extent where it was more functional and made the story more enjoyable.</p>
            <img src="images/work/responsive1.png">
        </div>
            <div id="rebelliousdisplay">
                <p><class id="blueText">You are viewing: Rebellious by Nav Mock-ups</class><br>Role: Visual Design & Rapid Prototyping<br><br>Rebellious by Nav is a clothing line that sells attire to females that feel rebellious. I was tasked with creating a branding and visual identity as well as visual mock-ups.
            <br>
            <br>
            This website is intended to sell users clothing from Nav. I tried to create a simple checkout system and a website that would easily translate to mobile as Rebellious' target audience is 20-30 year old women. I also rapidly prototyped this website to give the client a better understanding of how their clients would interact with the product line.</p>
            <img src="images/work/rebellious1.png">
            </div>
                        <div id="learningiosdisplay">
                <p><class id="blueText">You are viewing: Learning iOS Development</class><br>Role: Rapid Front-end Development and Copywriting<br><br>I created a website that intended to teach users a foundation of how to use XCode and Objective-C to build iOS apps.
            <br>
            <br>
            This consisted of eight lessons that would guide the user through the very essentials and teach them how to better use the resources that they have available to any extent that they needed.</p>
            <img src="images/work/learningios3.png">
            </div>
            <div id="formdisplay">
                <p><class id="blueText">You are viewing: Rebellious by Nav Mock-ups</class><br>Role: Visual Design & Rapid Prototyping<br><br>Rebellious by Nav is a clothing line that sells attire to females that feel rebellious. I was tasked with creating a branding and visual identity as well as visual mock-ups.
            <br>
            <br>
            This website is intended to sell users clothing from Nav. I tried to create a simple checkout system and a website that would easily translate to mobile as Rebellious' target audience is 20-30 year old women. I also rapidly prototyped this website to give the client a better understanding of how their clients would interact with the product line.</p>
            <img src="images/work/form1.png">
            </div>
</section>
<p id="checkOut">
You should check out some of my work
</p>
</div>
<section id="portfoliopics">
<p>Information Architecture & Usability</p>
<img src="images/dragonup.png" id="dragonup" alt="DragonUp">
<img src="images/province.jpg" id="provincesports" alt="The Province Sports">
<img src="images/canucks.jpg" id="canucks" alt="canucks">
<p>Design</p>
<img src="images/pencilmein.png" id="pencilmein" alt="Pencil Me In">
<img src="images/attack.png" id="attack" alt="Attack of the Space Leprechauns">
<p>Development</p>
<img src="images/rebellious.png" alt="Rebellious by Nav" id="rebellious">
<img src="images/learningios.png" alt="Learning iOS Development" id="learningios">
<img src="images/form.png" alt="Form Design" id="formdesign">
</section>


$(document).ready(function() {
    $('#dragonup').click(function() {
        $('#displays #dragonupdisplay').toggle();
    })
    $('#provincesports').click(function() {
        $('#displays #provincedisplay').toggle();
    })
    $('#canucks').click(function() {
        $('#displays #canucksdisplay').toggle();
    })
    $('#pencilmein').click(function() {
        $('#displays #pencilmeindisplay').toggle();
    })
    $('#attack').click(function() {
        $('#displays #attackdisplay').toggle();
    })
    $('#rebellious').click(function() {
        $('#displays #rebelliousdisplay').toggle();
    })
    $('#learningios').click(function() {
    $('#displays #learningiosdisplay').toggle();
    })
    $('#formdesign').click(function() {
    $('#displays #formdisplay').toggle();
    })
})

score 0 · Accepted Answer

我会通过使用一个类而不是为每个链接多次重复相同的代码来简单地编写你的代码。但是要解决您的问题，您需要做的是找到当前可见的项目（如果有）并在使当前项目可见之前将其隐藏。您可以使用选择器轻松完成此操作:visible。

所以你可以做这样的事情

<div class="clickableDiv">
    <!-- some content -->
</div>
<div class="clickableDiv">
    <!-- some content -->
</div>
<div class="clickableDiv">
    <!-- some content -->
</div>
<div class="clickableDiv">
    <!-- some content -->
</div>

然后在 jQuery 中，执行类似的操作

$(".clickableDiv").click(function() {
    $(".clickableDiv:visible").hide();
    $(this).show();
});

score 0 · Accepted Answer

通常，您应该为此使用类：

<div class="workdisplay" id="dragonupdisplay">...</div> //add class for all other divs
<img class="works" src="images/dragonup.png" id="dragonup" alt="DragonUp">//add class for all other imgs


$(document).ready(function() {
    $('.works').click(function() {
        $('.workdisplay').hide();
        $('#'+this.id+'display').show();
    })    
})

score 0 · Accepted Answer

用一个类标记所有可点击的元素，并在处理程序中首先隐藏显示下的所有项目，然后显示您想要的项目。使用 ID 的命名约定来查找显示项目：

$('.item').click(function() {
    $('#displays > div').hide();
    $('#' + this.id + 'display').show();
})

score 0 · Accepted Answer

正如我评论的那样，在显示之前隐藏所有 div。

$(document).ready(function() {
    var hideArticles = function() {
        $('#displays > div').hide();
    };

    $('#dragonup').click(function() {
        hideArticles()
        $('#dragonupdisplay').show();
        // $('#id #id') is bad form.  just use on ID, can only have one on page at once.
    })

    $('#provincesports').click(function() {
        hideArticles()
        $('#provincedisplay').show();
    })

    $('#canucks').click(function() {
        hideArticles()
        $('#canucksdisplay').show();
    })

    $('#pencilmein').click(function() {
        hideArticles()
        $('#pencilmeindisplay').show();
    })

    $('#attack').click(function() {
        hideArticles()
        $('#attackdisplay').show();
    })

    $('#rebellious').click(function() {
        hideArticles()
        $('#rebelliousdisplay').show();
    })

    $('#learningios').click(function() {
        hideArticles()
        $('#learningiosdisplay').show();
    })

    $('#formdesign').click(function() {
        hideArticles()
        $('#formdisplay').show();
    })
})

jquery - 进行切换检查是否一次切换多个项目

4 回答 4

Related

Reference