Member 14018582 Ответов: 1

Проблема Jquery hasclass


У меня возникла проблема с jquery .hasClass

у меня есть таблица с некоторыми данными внутри, и я пытаюсь создать пользовательскую функцию для того, чтобы при нажатии на строку таблицы установить ее с классом "selected", а затем получить идентификатор данных щелкнутого tr, а затем я хочу установить кнопку из disabled= "disabled" в enabled.

Мне удалось получить функцию, чтобы установить нажали строки таблицы с классом 'некоторые' но когда я нажимаю на класс снова я хочу, чтобы удалить класс выделен, а затем установить кнопку для гостей с ограниченными снова и hasClass метод возвращает false в таблице строку выделен, поэтому я не могу установить его, чтобы снять выделение строки и отключить эту кнопку еще раз...

таблица в 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>


функция для моей строки таблицы нажмите кнопку:

<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, и когда я проверяю консоль разработчика для элемента inspect, строка таблицы имеет класс "selected", поэтому я действительно озадачен тем, почему jquery не возвращает hasClass как true..

любая помощь была бы очень кстати,

заранее спасибо.

Что я уже пробовал:

я пробовал использовать html-селектор '#chkTask3', используя $(this), и ни один из них не работает. каждый раз, когда он возвращает false, я действительно не понимаю, почему он возвращает false, когда DOM ясно показывает, что строка таблицы с идентификатором "chkTask3" имеет класс "selected" в элементе класса.

я даже пытался воспроизвести все это на jsfiddle и там он делает то же самое

выберите строку и включите кнопку - JSFiddle[^]

1 Ответов

Рейтинг:
9

Bryian Tan

Попробуйте закомментировать эту строку, я думаю, что код под ней запутается, что класс был удален.

$(_prevSel).removeClass("selected");


Я предполагаю, что вы также хотите, чтобы код удалял ранее выбранный класс строк при выборе новой строки. Затем добавьте приведенный ниже код в оператор else. Обратитесь к примеру.

if(_prevSel !== "#"){
  	$(_prevSel).removeClass("selected");
  }


Пример:
выберите строку и включите кнопку - JSFiddle[^]


Member 14018582

Эй, спасибо за вашу помощь! Это на самом деле помогло мне решить эту проблему. Код был в замешательстве так что я изменил if, чтобы проверить, если это не определено сначала, потом проверить, если это не тот пункт нажал как раньше нажал и тогда она позволила мне выбирать и отменять выбор 🙌🙌🙌

Member 14018582

http://jsfiddle.net/6hf98k72/9