javascript - 单击链接时在跨度上切换类

Question

更新了我想要实现的代码示例。featuresToggle 甚至会触发复选框单击事件，然后应该在#featured-icon 上切换 css 类，但它不会添加该类。

<a class='favorite-btn' onclick="featuredToggle()">
                <span id='featured-icon' class="glyphicon glyphicon-star"></span>
                <input id="featured-toggle" type="checkbox" data-bind="checked: featured"/>
            </a>

function featuredToggle() { 
   $("#featured-toggle").trigger('click');
   $("#featured-icon").toggleClass('featured');
}

Answer 1

我猜你正在尝试这样做：

$(".favorite-btn").click(function () {
    $("#featured-toggle").prop('checked', function(_,ckd) {return !ckd});
    $("#featured-icon").toggleClass('active');
});

小提琴

Answer 2

首先，您使用的是 JQuery 而不是普通的 javascript。因此，在您的 JSFiddle 中，您必须从下拉列表中选择一个 JQuery 库。您还必须关闭一些无效的报价，但即使那样它也不起作用。

这是我为您制作的小提琴：http: //jsfiddle.net/MathiasaurusRex/gLBmX/21/

$(function() {  
    $("#featured-toggle").click(function() {  
        $("#featured-icon").toggleClass("active");  
    });  
});  

每当单击#featured-toggle 时，切换#featured-icon 上的“活动”类。

希望对您有所帮助！