文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery的切换卡位置

问使用jQuery的切换卡位置
EN

Stack Overflow用户

提问于 2014-05-02 16:57:29

回答 1查看 578关注 0票数 1

我正试图为我虚构的角色建立一个生物网站。每个生物都在.container类的“卡片”上。当页面加载时，所有的卡片都在屏幕的左边，一个对话框将显示给用户，告诉用户单击卡片会“激活”它，即“将其移动到屏幕的右侧以供读取”。

我已经成功地编码了页面，以便当点击时，适当的卡片移动到屏幕的右侧。我也成功地编写了代码，所以双击将卡片返回到屏幕左侧的位置。我的问题是那不是我想要的。我希望只需一次单击就可以激活非活动/停用卡，而只需单击一次就可以禁用活动卡。

正如我所说，当两个操作(激活和失活)在它们自己的事件处理程序中时，代码运行良好，但当它们位于同一个事件处理程序中时，我无法让它们运行。我搞不懂为什么。

HTML：

<html>
<head>
    <title>My Characters</title>
    <link rel="stylesheet" type="text/css" href="data\My Characters.css"/>
    <script src="data/jQuery.js"></script>
</head>

<body>
<header>
    <h1>My Characters</h1>
    <h2>All the different characters I've created over the years, many of whom have superpowers based on animals.</h2>
</header>

<article id="background">
<section id="main">

<section class="container" id="Vacuum">
    <h3>The Vacuum</h3>

    <p>
        Born the child of an inventor, the Vacuum's father made it big when he perfected a hand-held design for the L-RAD sonic beam weapon. Licensing his design to the military netted the Vacuum's immediate family 8.5B USD.
    </p>

    <p>
        As a result, from a young age, the Vacuum learned martial arts, developing a unique system devoid of blocks and strikes, relying instead on locks, flips, and holds.
    </p>

    <p>
        A secondary effect of his contact with military personnel is that the Vacuum was genetically altered in such a way that he can now control air, i.e. <i>aerokinesis</i>. Due to the extent of his powers , he has steel braces around his wrists, limiting his powers. he wears a comfortable sweat-suit with a custom mask that has a built-in night-vision visor.
    </p>
</section>

<section class="container" id="Mu">
    <h3>Mu</h3>
    <p>
        Mu is a lifelong crime-fighter, staring with his fifteen-year military career. After ending his enlistment as a general, he spent twenty-five years as an undercover police officer, and another ten years behind a desk at the FBI.
    </p>

    <p>
        During his time with the military, he was experimented on by a secret Government department, genetically altering Mu in such a way as to allow him to control friction.
        <br />
        The purpose of the experiment was to enable Mu to chase down and capture the previous genetic experiments: civilian and military prisoners recruited by a mole hoping to overthrow the US Government from within.
    </p>
</section>

<section class="container" id="Elasmobranchii">
    <h3>Elasmobranchii</h3>
    <p>
        A former Navy SEAL recruited by the mole to act as a field leader for the traitorous plot. Elasmobranchii joined "the cause" after his unit was denied benefits following a disastrous mission. 
        The mission was an utter failure due to a clerical error, resulting in a cover-up. The cover-up was successful due to both a smear campaign and a few choice assassinations directed at the SEALs involved.
    </p>

    <p>
        Elasmobranchii is named for the subclass containing sharks, skates, and rays. In accordance with this name, Elasmobranchii has superhuman senses of smell, touch, and hearing; as well as superhuman strength and speed. His greatest sense, however, is his electroreceptive sense: he can detect a one-volt battery from 1,000 miles away.
        <br />
        As if all this weren't enough, he also has a long, venomous, barbed tail he can use as an additional weapon or to pick up small objects.
    </p>
</section>

<section class="container" id="Phyllobates">
    <h3>Phyllobates</h3>

    <p>
        Phyllobates was a promising boxer that spent his nights doing "favors" for the mob. After several years in prison, he was recruited by a Government mole to participate in a genetic testing program. The result of this testing was that Phyllobates could punch in 15/100ths of a second, exude any poison ingested through his pores, and leap about sixty feet up or over. He also has the ability to climb walls.
    </p>
</section>

</section>  
</article>
<script src="data/My Characters.js"></script>
</body>
</html>

CSS：

*
{
    position: static;
}

body
{
    background-image: url('Scorched Asphalt.png');
    background-size: cover;
    margin: 0;
    padding: 0;
}

header
{
    width: 100%;
    text-align: center;
    background-color: rgba(238, 238, 238, 1);
    border: 2px solid black;
    margin: 0;
    padding: 0;
}

h1
{
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}

h2
{
    margin-top: 0;
    font-size: large;
}

hr
{
    color: black;
    border: 1px double black;
    border-style: double;
    width: 75%;
    margin: 0;
}

#main
{
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1em;
    padding-left: 1em;
    line-height: 1em;
}

h3
{
    padding: 0;
    margin: 0;
}

#Vacuum
{
    left: 50px;
    top: 80px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 1);
    color: white;
}
#Mu
{
    left: 75px;
    top: 125px;
    background-color: rgba(125, 100, 50, 1);
}

#Elasmobranchii
{
    left: 100px;
    top: 165px;
    background-color: rgba(50, 100, 125, 1);

}

#Phyllobates
{
    left: 125px;
    top: 205px;
    background-color: rgba(255, 255, 255, 1);
}

.container
{
    width: 33%;
    height: 67%;
    border: solid black 2px;
    margin: 0;
    padding: 1em;
    border-radius: .5em;
    font-weight: bold;
    position: absolute;
}

.active
{
    left: 33%;
    top: 380px;
}

jQuery/Javascript：

$(window).load(function(){

    //Inform the user on how the site works
    alert('\nClick a card to make it active.\nClick it again to de-activate it.');

    $('.container').click(function()
    {
        if($(this).css('left') == '50px'||'75px'||'100px'||'125px')
    {
        //Restore #Vacuum to its original position
        $('#Vacuum').css('left', '50px');
        $('#Vacuum').css('top', '80px');
        $('#Vacuum').css('z-index', '1');

        //Restore #Mu to its original position
        $('#Mu').css('left', '75px');
        $('#Mu').css('top', '125px');
        $('#Mu').css('z-index', '2');

        //Restore #Elasmobranchii to its original position
        $('#Elasmobranchii').css('left', '100px');
        $('#Elasmobranchii').css('top', '165px');
        $('#Elasmobranchii').css('z-index', '3');

        //Restore #Phyllobates to its original position
        $('#Phyllobates').css('left', '125px');
        $('#Phyllobates').css('top', '205px');
        $('#Phyllobates').css('z-index', '4');

        //Make the clicked '.container' the active one
        $(this).css('top', '15%');
        $(this).css('left', '50%');
        $(this).css('z-index', '5');
        $(this).addClass('active');
    }//End of IF condition

    else
    {
        //Restore #Vacuum to its original position
        $('#Vacuum').css('left', '50px');
        $('#Vacuum').css('top', '80px');
        $('#Vacuum').css('z-index', '1');

        //Restore #Mu to its original position
        $('#Mu').css('left', '75px');
        $('#Mu').css('top', '125px');
        $('#Mu').css('z-index', '2');

        //Restore #Elasmobranchii to its original position
        $('#Elasmobranchii').css('left', '100px');
        $('#Elasmobranchii').css('top', '165px');
        $('#Elasmobranchii').css('z-index', '3');

        //Restore #Phyllobates to its original position
        $('#Phyllobates').css('left', '125px');
        $('#Phyllobates').css('top', '205px');
        $('#Phyllobates').css('z-index', '4');

        //De-activate the clicked '.container'
        $(this).removeClass('active');
    }
})//End of container.click

});//End of document

css

toggle

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-02 18:11:53

嗨，你的方法有很多问题。

下面是一个有用的工具：http://jsfiddle.net/TpxNa/1/

1)您不能使用addclass来调整jquery的样式，因为您已经在用jquery设置内联样式，内联将优先。

2)您必须使用$(document).on('click‘.而不是.click(函数().因为我们需要动态地更改jquery的目标。

css添加一个非活动类

.inactive {
}

Html

将非活动添加到所有容器中，如下所示

<section class="container inactive" id="Phyllobates">

jquery

$(document).ready(function () {
    alert('Click a card to make it active.Click it again to de-activate it.');

    $(document).on('click', '.inactive', function () {
        $('#Vacuum').css({ 'left': '50px', 'top': '80px', 'z-index': '1' });
        $('#Mu').css({ 'left': '75px', 'top': '125px', 'z-index': '2' });
        $('#Elasmobranchii').css({ 'left': '100px', 'top': '165px', 'z-index': '3' });
        $('#Phyllobates').css({ 'left': '125px', 'top': '205px', 'z-index': '4' });

        $(this).css({ 'top': '15%', 'left': '50%', 'z-index': '5' });
        $(this).addClass('active');
        $(this).removeClass('inactive');
    });

    $(document).on('click', '.active', function () {
        $('#Vacuum').css({ 'left': '50px', 'top': '80px', 'z-index': '1' });
        $('#Mu').css({ 'left': '75px','top': '125px', 'z-index': '2' });
        $('#Elasmobranchii').css({ 'left': '100px', 'top': '165px', 'z-index': '3' });
        $('#Phyllobates').css({ 'left': '125px', 'top': '205px', 'z-index': '4' });

        $(this).removeClass('active');
        $(this).addClass('inactive');
    });
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23433294

复制

相似问题

问使用jQuery的切换卡位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery的切换卡位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery的切换卡位置
EN