Jquery有类问题 [英] Jquery hasclass problem
问题描述
我遇到了jquery的问题.hasClass
i有一个包含一些数据的表，我正在尝试创建一个自定义函数当我点击一个表行来设置它的类'selected'然后获取被点击的tr的数据ID然后我想设置一个按钮从禁用='禁用'到启用。
我设法获得了用选择类设置点击表行的功能，但是当我再次点击该类时，我希望它删除选定类然后设置再次禁用该按钮，并且hasClass方法在选定的表行上返回false，因此我无法将其设置为取消选择该行并再次禁用该按钮...
表格为html：
Im having an issue with jquery's .hasClass
i have a table with some data inside and i am trying to create a custom function for when i click on a table row to set it with the class 'selected' and then get the data-id of the clicked tr then i want to set a button from disabled='disabled' to enabled.
I have managed to get the function to set the clicked table row with the class 'selected' but when i click on the class again i want it to remove the class 'selected' and then set the button to disabled again and the hasClass method is returning false on the table row for 'selected' so i cant set it to deselect the row and disable the button again...
the table is html:
<table class="table table-hover">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Comments</th>
<th>Created</th>
<th>Due</th>
<th>Creator</th>
<th>%</th>
<th>Type</th>
</tr>
</thead>
<tbody id="taskstbody"><tr class="table-row taskGrpRow" data-id="chkTask1" id="chkTask1">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Test Task</td>
<td class="taskGrpRow">This is a task example</td>
<td class="taskGrpRow">1 week ago</td>
<td class="taskGrpRow">in 2 Weeks </td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">0%</td>
<td class="taskGrpRow"> To Do</td>
</tr><tr class="table-row alert-warning taskGrpRow" data-id="chkTask2" id="chkTask2">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Example Task</td>
<td class="taskGrpRow">Example of an overdue task</td>
<td class="taskGrpRow">2 months ago</td>
<td class="taskGrpRow"> Due 4 Weeks ago</td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">3%</td>
<td class="taskGrpRow"> Follow Up</td>
</tr><tr class="bg-success table-row fh-checkbox taskGrpRow selected" data-id="chkTask3" id="chkTask3">
<td></td>
<td>Example Task</td>
<td>Example of a completed task</td>
<td>1 month ago</td>
<td>1 Week ago</td>
<td>admin</td>
<td>100%</td>
<td> To Do</td>
</tr></tbody>
</table>
我的表格行的功能点击：
the function for my table row click:
<script>
$(document).ready(function(){
var prevSel ="";
var taskid = "";
$("tr.table-row.taskGrpRow").click(function() {
var _prevSel = "#" + prevSel;
var _curSel = "#" + $(this).data("id");
//only one task selection at a time so check if the previous selection is set and remove selected class
if(_prevSel === "#"){
console.log("Previous Selection: Empty");
}else if( _prevSel !== undefined && _prevSel !== _curSel){
}else{
console.log("Previous Selection:" + _prevSel);
$(_prevSel).removeClass("selected");
}
var taskid = $(this).data("id");
console.log("Task Selected: " + taskid);
var itemSelected = "#" + taskid;
var classSelected = $(itemSelected).hasClass("selected");
console.log($(itemSelected).className + " | " + classSelected);
console.log($(this));
if(classSelected === true){
console.log("Class '.selected Present' on " + $(this).attr("id"));
$(itemSelected).removeClass("selected");
$("#selectedTaskDropdown").prop("disabled", true);
}else{
console.log("Class '.selected Not Present' on " + $(this).attr("id"));
$(this).addClass("selected");
$("#selectedTaskDropdown").prop("disabled", false);
}
prevSel = taskid;
});
})
</script>
classSelected返回false当我检查开发人员控制台中的检查元素时，表行有选定类，所以我真的很难过为什么jquery没有将hasClass返回为真...
任何帮助都会很棒，
提前感谢。
我尝试过的：
i尝试使用html选择器'＃chkTask3'，使用$（this）并且它们都不起作用。它返回false的每一种方式，我真的不明白为什么当DOM清楚地显示id为'chkTask3'的表行在类元素中具有类'selected'时它返回false。
我甚至试图在jsfiddle上复制整个东西，它也在那里做同样的事情
选择行并启用按钮 - JSFiddle [ ^ ]
推荐答案
（ document ）。ready（ function （）{
var prevSel = ;
var taskid = ;
(document).ready(function(){ var prevSel =""; var taskid = "";
（ tr.table-row.taskGrpRow）。click（ function （）{
var _prevSel = ＃ + prevSel;
var _curSel = ＃ +
("tr.table-row.taskGrpRow").click(function() { var _prevSel = "#" + prevSel; var _curSel = "#" +
（ this ）。data（ < span class =code-string> id）;
// 一次只能选择一个任务，因此请检查先前的选择是否已设置并删除所选的类
if （_ prevSel === ＃）{
console .log（ 上一个选择：空）;
} else if （_ prevSel！== undefined && _prevSel！== _curSel）{
} else {
console .log（ 上一个选择： + _prevSel）;
(this).data("id"); //only one task selection at a time so check if the previous selection is set and remove selected class if(_prevSel === "#"){ console.log("Previous Selection: Empty"); }else if( _prevSel !== undefined && _prevSel !== _curSel){ }else{ console.log("Previous Selection:" + _prevSel);
这篇关于Jquery有类问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
