Question

我是一般的编码新手，尤其是javascript。

我做了一个翻转div效果。但我注意到，当单击一个void onActionTriggered() { const QString filename = // ... ui.TabWidget->addTab( /* Your custom class derived from QWidget or a Qt widget */, filename ); }来触发翻转效果时，页面中所有其他类似的div也会被触发。所以我在翻转div时尝试添加.button和.preventDefault()，到目前为止它是一个很大的 FAIL

作为首发，我提出了这个代码..

.stopPropagation()

在这里演示：http://jsfiddle.net/uriri/ke7kqvvk/3/

我的一位朋友建议我在$('.insidecontent .button').click(function () { $('.insidecontent').addClass('flipped'); $('.insidecontent').removeClass('unflipped'); }); $('.insidecontent .button-c').click(function () { $('.insidecontent').removeClass('flipped'); $('.insidecontent').addClass('unflipped'); });函数内的当前目标上使用.parents()。但在阅读jQuery文档后，我完全迷失了！

Answer 1

您不需要停止点击事件或阻止默认。你只需要翻转右边的元素。你没有在所有.insidecontent中添加/删除类，而你只需要选择所点击按钮的父元素：

$('.insidecontent .button').click(function () {
    $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});

演示： http://jsfiddle.net/ke7kqvvk/5/

或者更短的优化版本可以是：

$('.insidecontent').find('.button, .button-c').click(function () {
    $(this).closest('.insidecontent').toggleClass('flipped unflipped');
});

演示： http://jsfiddle.net/ke7kqvvk/6/

Answer 2

preventDefault()和stopPropagation()在这里没有帮助。您需要使用比具有相同类别的所有元素更具体的选择器。

＆＃13;

$('.insidecontent .button').click(function () {
    $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});

＆＃13;

.content{
	position: relative;
	background: #ffffff;
	width:100%;
	text-align:center;
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
}

._hasdata .insidecontent {
	position: relative;
	background: #ffffff;
	margin-bottom:30px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000;
	perspective: 1000px;
}

._hasdata .insidecontent .front {
	position: relative;
	z-index: 900;
	width: 200px;
	height: 200px;
	background: #ededed;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}

._hasdata .insidecontent .front .fcontent {
	position:relative;
	top:30%;
	}

._hasdata .insidecontent.flipped .front {
	z-index: 900;
	-webkit-transform: rotateX(0deg) rotateY(180deg);
	-moz-transform: rotateX(0deg) rotateY(180deg);
	transform: rotateX(0deg) rotateY(180deg);
}

._hasdata .insidecontent .back {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0;
	left: 0;
	z-index: 800;
	-webkit-transform: rotateX(0deg) rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateX(0deg) rotateY(-180deg);
}

._hasdata .insidecontent.flipped .back {
	z-index: 1000;
	background: #E7E7E7;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}

._hasdata .insidecontent .front,
._hasdata .insidecontent .back {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

._hasdata .insidecontent .button,
._hasdata .insidecontent.flipped .button-c {
	z-index: 15;
	display: block;
	position: absolute;
	bottom: 0;
	margin: -30px 20px 20px;
	opacity: 0;
	-webkit-transition: opacity .1s linear;
	-moz-transition: opacity .1s linear;
	transition: opacity .1s linear;
}

._hasdata .insidecontent:hover .button,
._hasdata .insidecontent.flipped:hover .button-c {
	opacity: 0.8;
}

._hasdata .insidecontent.unflipped .button-c {
	display: none;
}

._hasdata .insidecontent.flipped ._lar {
	height: 100%;
}

._hasdata .insidecontent.unflipped .bcontent {
	display: none;
}

._hasdata .insidecontent.flipped .bcontent {
	top: 30%;
	position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
	<div class="_hasdata">
		<div class="insidecontent initalized unflipped">
			<div class="front">
                <span class="fcontent">FRONT CONTENT<br />HERE</span>
				<a class="btt button">info</a>
			</div>
			<div class="back _lar">
				<div class="bcontent">BACK INFO HERE</div>
				<a class="btt button-c">go back</a>
			</div>
		</div>
	</div>
    	<div class="_hasdata">
		<div class="insidecontent initalized unflipped">
			<div class="front">
                <span class="fcontent">FRONT CONTENT<br />HERE</span>
				<a class="btt button">info</a>
			</div>
			<div class="back _exif">
				<div class="bcontent">BACK INFO HERE</div>
				<a class="btt button-c">go back</a>
			</div>
		</div>
	</div>
</div>

＆＃13;

Answer 3

您是否了解过＆＃34; this＆＃34;关键字呢？在JQuery单击处理程序中， $（this）指的是调用处理程序的元素。所以，如果你在$（this）上放置removeClass和addClass方法，它只会影响那个元素。你也可以使用它来遍历...所以你的代码看起来像这样：

    $('.insidecontent .button').click(function () {
    $(this).parent().find('.insidecontent').addClass('flipped');
    $(this).parent().find('.insidecontent').removeClass('unflipped');
});

$('.insidecontent .button-c').click(function () {
    $(this).parent().find('.insidecontent').removeClass('flipped');
    $(this).parent().find('.insidecontent').addClass('unflipped');
});

你可能甚至不需要在你的情况下使用find方法，但最好是明确的。

添加preventDefault（）和stopPropagation（）

3 个答案: