Question

我有一个锚标记或btn。我在尝试使用jQuery禁用时添加正确的样式。

<a id="course-progress-report-btn" href="#" class="disabled">
    <div class="sprites report_icon_blue"></div>
    <span>COURSE PROGRESS REPORT</span>
</a>

我想选择div，并将班级report_icon_blue替换为班级report_icon_gray。

我如何使用jQuery做到这一点？

我已经尝试了

//course progress report
if(showReport){
    courseProgressBtn.attr('href', window.rel_path+'teacher/reports/course-summary?courseId='+id+'&classroomId='+selectedClassroom).removeClass('disabled');
}else{
    courseProgressBtn.attr('href', '#').addClass('disabled').next('.sprites').removeClass('report_icon_blue').addClass('report_icon_grey');
}

我无法交换图片。

结果

https://developers.google.com/youtube/youtube_player_demo

Answer 1

您的代码无法使用，因为您需要使用.find()代替.next()。

courseProgressBtn.attr('href', '#')
                 .addClass('disabled')
                 .find('.sprites')
                 .removeClass('report_icon_blue')
                 .addClass('report_icon_grey');

我个人会通过重构来更清楚地说明：

courseProgressBtn.attr('href', '#')
                 .addClass('disabled')

var $icon = courseProgressBtn.find(".sprites");
$icon.removeClass('report_icon_blue')
     .addClass('report_icon_grey');

或者，正如@Denys Séguret在我的评论中提到的那样，您可以通过更改CSS来更新图像（假设精灵仅用于此实例）：

<强> HTML

<a id="course-progress-report-btn" href="#" class="disabled">
    <div class="sprites report_icon"></div>
    <span>COURSE PROGRESS REPORT</span>
</a>

<强> JS

courseProgressBtn.attr('href', '#')
                 .addClass('disabled')

<强> CSS

.course-progress-report-btn .sprites.report_icon
{
   //blue icon
}
.course-progress-report-btn.disabled .sprites.report_icon
{
   //gray icon
}

Answer 2

使用带有布尔值的toggleClass ..

// Passing true will make sure the class exists

// Passing false will make sure the class **doesn't exist**

$("#course-progress-report-btn div").toggleClass("report_icon_blue", true);
$("#course-progress-report-btn div").toggleClass("report_icon_gray", false);

Answer 3

当您确定所选元素具有A类且没有B类时，使用纯jQuery，最简单的方法是：

    // var backgoroundTap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: "DismissKeyboard")
    // self.view.addGestureRecognizer(backgoroundTap)

其他可能性是根据变量切换所有可能的类。

selection.toggleClass('A B')

使用jQueryUI时，最佳做法是使用var cls ='B' selection.toggleClass('A', cls=='A') selection.toggleClass('B', cls=='B')来实现此目的。

http://api.jqueryui.com/switchclass/

使用jQuery替换类名的最佳做法是什么？

3 个答案: