jQuery添加了一个类，但不会删除它

Question

它添加了＆＃34;非活动＆＃34;上课并删除＆＃34;额外＆＃34;单击.extra锚点时的类，但是当您单击一个非活动锚点时，它会拒绝删除超活动类并将其替换为额外的类。

这是HTML

＆＃13;

＆＃13;

	$("a.extra").click(function(e){
		$(this).addClass("extra-active").removeClass("extra");
		e.preventDefault();
	})

	$("a.extra-active").click(function(e){
		$(this).removeClass("extra-active").addClass("extra");
		e.preventDefault();
	})

＆＃13;

.extra{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:grey;
	padding:12px;
	border-radius:8px;
}

.extra-group{
	p {
		text-align:center;
	}
}


.extra:hover{
	background-color:blue;
}

.extra-active{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:red !important;
	padding:12px;
	border-radius:8px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
	<span class="extra-group">
		<a class="extra" href="" title = "An hour of Ironing" id="extra-ironing" style = "background-image: url('{{ url_for('static', filename='book-icons/iron-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>An Hours Ironing</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Fridge" id="extra-fridge"  style = "background-image: url('{{ url_for('static', filename='book-icons/fridge-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Fridge</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Oven" id="extra-oven"  style = "background-image: url('{{ url_for('static', filename='book-icons/oven-icon.png') }}'); background-size: 80% 80%;; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Oven</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "A load of Washing" id="extra-washing" style = "background-image: url('{{ url_for('static', filename='book-icons/washer-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>A load of Washing</p>
	</span>
	<span class="extra-group">
		<a class="extra " href="" title = "Interior Windows" id="extra-windows" style = "background-image: url('{{ url_for('static', filename='book-icons/window-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Interior Windows</p>
	</span>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

扩展@ xandercoded的贡献，我向正文添加了一个监听器，然后更新了on函数的目标。

	$("body").on('click','.extra',function(e){
		$(e.target).addClass("extra-active").removeClass("extra");
		e.preventDefault();
	})

	$("body").on('click','.extra-active',function(e){
		$(e.target).removeClass("extra-active").addClass("extra");
		e.preventDefault();
	})

.extra{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:grey;
	padding:12px;
	border-radius:8px;
}

.extra-group{
	p {
		text-align:center;
	}
}


.extra:hover{
	background-color:blue;
}

.extra-active{
	display:inline-block;
	height: 128px;
	width: 128px;

	background-color:red !important;
	padding:12px;
	border-radius:8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="display:inline-block;">
	<span class="extra-group">
		<a class="extra" href="" title = "An hour of Ironing" id="extra-ironing" style = "background-image: url('{{ url_for('static', filename='book-icons/iron-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>An Hours Ironing</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Fridge" id="extra-fridge"  style = "background-image: url('{{ url_for('static', filename='book-icons/fridge-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Fridge</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "Inside the Oven" id="extra-oven"  style = "background-image: url('{{ url_for('static', filename='book-icons/oven-icon.png') }}'); background-size: 80% 80%;; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Inside the Oven</p>
	</span>
	<span class="extra-group">
		<a class="extra" href="" title = "A load of Washing" id="extra-washing" style = "background-image: url('{{ url_for('static', filename='book-icons/washer-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>A load of Washing</p>
	</span>
	<span class="extra-group">
		<a class="extra " href="" title = "Interior Windows" id="extra-windows" style = "background-image: url('{{ url_for('static', filename='book-icons/window-icon.png') }}'); background-size: 80% 80%; background-repeat: no-repeat; background-position: center center;"></a>
		<p>Interior Windows</p>
	</span>
</span>

Answer 2

在最初的html中没有任何extra-active类，所以当jquery在该类上绑定click事件时，它会绑定到任何内容。 在添加类之后，应使用on绑定事件或重新绑定事件。

$(document.body).on('click', 'a.extra', function(e){
    $(this).addClass("extra-active").removeClass("extra");
    e.preventDefault();
})

$(document.body).on('click', 'a.extra-active', function(e){
   $(this).removeClass("extra-active").addClass("extra");
   e.preventDefault();
})

Answer 3

只有$（＆＃34; a.extra＆＃34;）在运行时找到元素，这是唯一将执行的onclick。

$（＆＃34; a.extra-active＆＃34;）。click函数永远不会执行，因为如果在运行时没有找到该类的任何元素。

如果您只想更改课程，可以在$（＆＃34; a.extra＆＃34;）中使用切换.onclick

$(this).toggleClass("extra-active");
$(this).toggleClass("extra");

Answer 4

我真的不知道为什么你需要更换课程，而你可以使用 toggleClass（）;

在css中

.extra{
    display:inline-block;
    height: 128px;
    width: 128px;

    background-color:grey !important;
    padding:12px;
    border-radius:8px;
}

.extra-group > p {
        text-align:center;
}


.extra:hover{
    background-color:blue;
}

.extra-active{
    background-color:red !important;
}

在js

$("a.extra").click(function(e){
        $(this).toggleClass("extra-active");
        e.preventDefault();
    })

DEMO

Answer 5

当您引用$("a.extra-active")时，没有任何处理程序附加。即使您创建它们之后，您的javascript也已经运行。

尝试使用事件传播。

$(document.body).on('click', '.extra-active', function() {
    // Do Work
});

这样，如果单击文档，它会检查单击的元素是否与.extra-active匹配。如果是，则运行该功能。

More reading

Answer 6

尝试切换2个类。这是fiddle

$("a.extra").click(function(e){

    e.preventDefault();
$(this).toggleClass('extra');
$(this).toggleClass('extra-active');


});

$("a.extra-active").click(function(e){
   e.preventDefault();
$(this).toggleClass('extra');
$(this).toggleClass('extra-active');
})

Answer 7

正如其他人所指出的那样，代码首次加载时没有.extra-active。

这将有效：

var extraActiveClickFunction = function(e) {
    $(this).removeClass("extra-active").addClass("extra");
    e.preventDefault();
}
var extraClickFunction = function(e) {
    $(this).removeClass("extra-active").addClass("extra");
    e.preventDefault();
    // this ensures that our newly created extra-active class 
    // has the correct function bound
    $("a.extra-active").click(extraActiveClickFunction)
}

// original page load bind
$("a.extra").click(extraClickFunction)

这里也显示了将函数赋值给变量的好处，它使这种事情更容易处理