Question

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

<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 Fiddle link

Answer 1

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

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

拥有您要调用toggleClass的链接的ID。

像这样

HTML：

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

使用Javascript：

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

Answer 2

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');
});

Demo

Answer 3

您需要专门识别您要定位的a标记。这会将点击处理程序附加到页面上的每个 a标记：

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

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

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

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

$('#targetLink').click(function () { ... });

Answer 4

您需要添加类似flip的课程。 http://jsfiddle.net/9CHEb/6/

Answer 5

为链接指定唯一ID。你现在拥有的是在任何链接点击上调用的功能。所以，你需要像：

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

并在html中：

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

.click（关于链接问题的function（）

5 个答案: