[英]Toggle card position using jQuery
我正在嘗試為自己制作的角色建立一個傳記網站。 每個生物都放在類.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
嗨，您的方法有很多問題
這是一個工作的jsfiddle： http : //jsfiddle.net/TpxNa/1/
1）您不能使用addclass來調整jquery的樣式，因為您已經使用jquery設置了內聯樣式，並且內聯將具有優先權。
2）您必須使用$（document）.on（'click'...而不是.click（function（）...），因為我們需要動態更改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');
});
});
如何使用語義UI和JQuery使特定卡片上的調光器而不是我的所有卡片庫切換
[英]How to get dimmer on specific card to toggle rather than all my card gallery using Semantic UI and JQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.