jQuery Toggle div和类

Question

CSS：

.project_toggle_on {
    padding-right:20px;
    cursor:pointer;
    background: url(../images/minus.jpg) no-repeat;
}

.project_toggle_off {
    padding-right:20px;
    cursor:pointer;
    background: url(../images/plus.jpg) no-repeat;
}

HTML代码：

<span class="project_toggle_off" onclick="toggle_timesheet('10');"></span>
<div style="display: none;" id="task_10" class="task_project_id"></div>

jQuery代码：

function toggle_timesheet(task_id) {
    //$(this).toggleClass('project_toggle_off');
    $("#" + task_id).slideToggle(100);
}

上面的代码可以显示/隐藏div ，但是当切换时，如何添加/删除类以显示plus/minus ？

最初，将显示加号，并且div将被隐藏。 单击它时，将显示减号，并显示div。

Answer 1

您需要在单击元素上下文中使用.toggleClass() ，可以在onclick方法中传递对象：

JS：

function toggle_timesheet(task_id,obj) {
  $(obj).toggleClass('project_toggle_off');
  $("#" + task_id).slideToggle(100);
}

HTML：

<span class="project_toggle_off" onclick="toggle_timesheet('10',this);"></span>
<div style="display: none;" id="task_10" class="task_project_id"></div>

Answer 2

您需要将当前元素作为参数传递给点击处理程序，然后切换类

<span class="project_toggle_off" onclick="toggle_timesheet('10', this);"></span>
<div style="display: none;" id="task_10" class="task_project_id"></div>

然后

function toggle_timesheet(task_id, el) {
    $(el).toggleClass('project_toggle_off project_toggle_on');
    $("#" + task_id).slideToggle(100);
}

---

我建议使用jQuery事件处理程序，而不要使用内联处理程序

<span class="project_toggle project_toggle_off" data-task="10"></span>
<div style="display: none;" id="task_10" class="task_project_id"></div>

然后

$('.project_toggle').click(function () {
    var $this = $(this);
    $this.toggleClass('project_toggle_off project_toggle_on');
    $("#task_" + $this.data('task')).slideToggle(100);
})

Answer 3

看来jQuery也不适用于show / hide div。 您的代码应如下所示：

HTML：

<span class="project_toggle_on project_toggle_off" onclick="toggle_timesheet('10', this);"></span>
<div style="display: none;" id="task_10" class="task_project_id"></div>

jQuery的

function toggle_timesheet(task_id, toogleObj) {
 $("#task_" + task_id).slideToggle(100);
 $(toggleObj).toggleClass('project_toggle_off');
}