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