-5

我尝试在我的网站上使用的此代码有问题。问题是，每当我单击同一页面中的其他链接时，都会触发翻转事件。我该如何纠正这种行为？

<a href='#'>Click Me</a>

<div id='flip-container'>
    <div id='flip-card'>
        <div class='front face'>
            <div class='input-append'>
                <input style='position: static' type='text' value='front face' readonly/> <span class='add-on'>
                    <i class='icon-th'></i>
                </span>

            </div>
        </div>
        <div class='back face'>back face</div>
    </div>
</div>

jQuery：

$('a').click(function () {
    $('#flip-card').toggleClass('rotated');
});

JS 小提琴链接。

4

5 回答 5

2

我更新了小提琴。请转到下面的链接。

http://jsfiddle.net/9CHEb/11/

具有要调用 toggleClass 的链接的 id。

像这样

html:

<a href='#' id="clickmeId">Click Me</a>

Javascript：

$('#clickmeId').click(function() {
$('#flip-card').toggleClass('rotated');
});
于 2013-10-07T20:18:13.273 回答
1

other links in the same page that flip event is triggered因为您已将处理程序与a标签绑定。使用 id 或类

HTML

<a href='#' id="filpme">Click Me</a>

JS

$('#filpme').click(function() {
    $('#flip-card').toggleClass('rotated');
});

演示

于 2013-10-07T20:14:50.757 回答
1

您需要明确标识a您要定位的标签。这将为页面上的每个 a标签附加一个点击处理程序：

$('a').click(function () { ... });

有很多方法可以专门针对那个a，但这只是在不知道完整标记的情况下猜测。一件简单的事情是给它一个id：

<a href="#" id="targetLink">Click Me</a>

然后您可以使用 id 选择器引用它：

$('#targetLink').click(function () { ... });
于 2013-10-07T20:15:11.597 回答
0

您需要添加一个像flip. http://jsfiddle.net/9CHEb/6/

于 2013-10-07T20:14:23.403 回答
0

给链接一个唯一的ID。您现在拥有的是在任何链接点击时调用该函数。所以，你想要这样的东西：

$('a#flipLink').click(function() {
$('#flip-card').toggleClass('rotated');
});

在html中：

<a href='#' id="flipLink">Click Me</a>
于 2013-10-07T20:15:57.273 回答