jQuery的切換的div和類

CSS：jQuery的切換的div和類

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

上面的代碼工作以翔w/hide div，但是如何添加/刪除類以在切換時顯示plus/minus符號？

最初，加號會顯示，div將隱藏。點擊它時，會顯示減號，並顯示div。

來源

2015-03-25 Slimshadddyyy

你需要將當前元素作爲參數傳遞給click處理程序，然後切換類

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

來源

2015-03-25 06:29:29

阿倫P約翰尼拉：是否有可能加入跨度提示顯示在切換不同的消息？ – Slimshadddyyy 2015-03-25 06:49:33

@Slimshadddyyy是否使用任何工具提示插件或默認工具提示 – 2015-03-25 06:50:49

現在，默認'title'作爲我的工具提示。 – Slimshadddyyy 2015-03-25 06:51:07

您需要使用.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>

來源

2015-03-25 06:27:56

它看起來像jQuery也不適用於顯示/隱藏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'); 
}

來源

2015-03-25 06:40:50

jQuery的切換的div和類

回答

相關問題