Jquery ближайший из этого не удается, почему? - PullRequest
Новая
       37

Jquery ближайший из этого не удается, почему?

0 голосов
/ 28 июня 2019

Jquery не моя сильная сторона.Это кажется логически правильным, хотя это не работает.Я искал все от поиска, до ближайшего, до этого и т. Д. Я не могу понять, почему это не работает.

Что я пытаюсь сделать, это добавить класс к ближайшему tr, когда this <span> нажата.

Я не получаю ошибок, но я также не получаю результатов.

КОД: 

$curTable .= "
    <tr bgcolor='#f2e2f2' onmouseover=style.backgroundColor='#FFFFFF'; onmouseout=style.backgroundColor='#f2e2f2';>
        <td>$typeSelect</td>
        <td>$cfilename</td>
        <td><input type='text' size='20' name='cexpDate' class='dp exp' value='$cexpDate' /><script type='text/javascript'>$('.dp').datetimepicker({format:'m/d/Y'});</script></td>
        <td>$catSelect</td>
        <td>$cdateAdded</td>
        <td>$caddedBy</td>
        <td><span class='mod' onclick=\"deleteFile('{$cid}','{$cfilename2}');\">delete</span> | <span class='mod' onclick='modFile($cid)'>modify</span></td>
    </tr>";

Jquery: 

function deleteFile(fileId,fileName){
    var fileId = fileId;
    var fileName = fileName;
    var test = this;
    //alert(test);
    $(this).closest('tr').addClass("highlight");
    $('#submit').prop('disabled', true);
    $('#rmDeleteOverlay').fadeIn();
    $('#deleteFile').append("<br><br><center>"+fileName+"</center>");
}

CSS: 

.highlight{
    background-color:#000;
}

Любая помощь приветствуется. 

function deleteFile(fileId,fileName){
	var fileId = fileId;
	var fileName = fileName;
	var test = this;
	//alert(test);
	$(this).closest('tr').addClass("highlight");
	$('#submit').prop('disabled', true);
	$('#rmDeleteOverlay').fadeIn();
	$('#deleteFile').append("<br><br><center>"+fileName+"</center>");
}
.highlight{
	background-color:#000;
	
}
.mod{
	cursor:pointer;
	color:#a45127;
}
.mod:hover{
	cursor:pointer;
	text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr bgcolor='#f2e2f2' onmouseover=style.backgroundColor='#FFFFFF'; onmouseout=style.backgroundColor='#f2e2f2';>
			<td><select name='type'><option value='spec'>SPEC</option><option selected value='clg'>CLG</option><option value='coa'>COA</option><option value='gmo'>GMO</option><option value='allergen'>ALLERGEN</option><option value='audit'>AUDIT</option><option value='cor'>COR</option><option value='organic'>ORGANIC</option><option value='kosher'>KOSHER</option><option value='oth'>OTHER</option></select></td>
			<td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>
			
			<td><select name='cat'><option selected value='cur'>Current</option><option value='oth'>Other</option><option value='arc'>Archive</option></select></td>
			<td>2019-06-20 22:34:43</td>
			<td><a href='editUser.php?id=11'>11</a></td>
			<td><span class='mod' onclick="deleteFile('1','<a href=\'/uploads/rm/46/46_clg_20190620223443.pdf\' target=\'_blank\'>46_clg_20190620223443.pdf</a>');">delete</span> | <span class='mod' onclick='modFile(1)'>modify</span></td>
		</tr>

Ответы [ 4 ]

1 голос
/ 28 июня 2019

Чтобы продемонстрировать, что @Barmar уже сказал, вот код доказательства: 

function foo(context) {
  context.closest('div').style.backgroundColor = 'yellow';
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus omnis et dolorem nobis?
  <button onclick="foo()">click me</button> Harum, aspernatur molestias at asperiores veniam sit pariatur aut animi, dignissimos consequatur quam quo earum dolor quod?</div>

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus omnis et dolorem nobis?
  <button onclick="foo(this)">click me, this time passing context</button> Harum, aspernatur molestias at asperiores veniam sit pariatur aut animi, dignissimos consequatur quam quo earum dolor quod?</div>

Если вы хотите использовать this, вам нужно использовать addEventListener (что вы должны сделать в любом случае, встроенные прослушиватели событий действительно плохи : 

function foo() {
  this.closest('div').style.backgroundColor = 'yellow';
}

baz.addEventListener('click', foo);
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus omnis et dolorem nobis?
  <button id="baz">click me</button> Harum, aspernatur molestias at asperiores veniam sit pariatur aut animi, dignissimos consequatur quam quo earum dolor quod?</div>
1 голос
/ 28 июня 2019

Не уверен, что это проблема, но в JSFiddle (и в других местах вам, возможно, придется заключать tr в теги таблицы. Мне кажется, это проблема. 

<!DOCTYPE html>
<html>
<table>
<tr id = "rowelement">
  <td><select name='type'>
  <option value='spec'>SPEC</option>
  <option selected value='clg'>CLG</option>
  <option value='coa'>COA</option>
  <option value='gmo'>GMO</option>
  <option value='allergen'>ALLERGEN</option>
  <option value='audit'>AUDIT</option>
  <option value='cor'>COR</option>
  <option value='organic'>ORGANIC</option>
  <option value='kosher'>KOSHER</option>
  <option value='oth'>OTHER</option>
  </select>
  </td>
    <td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>

<td>
<select name='cat'>
<option selected value='cur'>Current</option>
<option value='oth'>Other</option>
<option value='arc'>Archive</option>
</select>
</td>

<td>2019-06-20 22:34:43</td>
<td><a href='editUser.php?id=11'>11</a></td>
<td><span id ="delete" class='mod' data-file = "1" data-filepath = "/uploads/rm/46/46_clg_20190620223443.pdf">delete</span> | <span id ="mod" class='mod' onclick='modFile($cid)'>modify</span>
</td>
</tr>
</table>
</html>

Не уверен, что JS работает для вас, но если вы можете поместить параметры для функции в атрибуты данных, это был бы один метод. 

$("#rowelement").on("mouseover", function(e) {
    $(this).css("background", "#FFFFFF");
});
$("#rowelement").on("mouseout", function(e) {
    $(this).css("background", "#f2e2f2");
});

$("#delete").on("click", function(e) {
e.preventDefault();
    var fileId = $(this).data("file");
    var fileName = $(this).data("filepath");
    $(this).closest('tr').addClass("highlight");
    // ??? $('#submit').prop('disabled', true);
    // ??? $('#rmDeleteOverlay').fadeIn();
    // ???$('#deleteFile').append("<br><br><center>"+fileName+"</center>");
});

CSS 

.highlight{
    background-color: #000 !important;
}
.mod{
    cursor: pointer;
    color: #a45127;
}
.mod:hover{
    cursor: pointer;
    text-decoration: underline;
}
#rowelement {
  background: #f2e2f2;
}
1 голос
/ 28 июня 2019

Когда вы вызываете функцию типа onclick="deleteFile('{$cid}','{$cfilename2}');, она не устанавливает this для элемента в функции. Вам нужно передать элемент явно, как onclick="deleteFile(this,'{$cid}','{$cfilename2}');.

Вы также не видели изменения стиля по сравнению с классом highlight, потому что style="background-color: #f2e2f2" имел преимущество. Я переместил это в CSS и сделал стиль для .highlight более конкретным. Кроме того, используйте :hover в CSS вместо onmouseover. 

function deleteFile(element, fileId, fileName) {
  $(element).closest('tr').addClass("highlight");
  $('#submit').prop('disabled', true);
  $('#rmDeleteOverlay').fadeIn();
  $('#deleteFile').append("<br><br><center>" + fileName + "</center>");
}
tr {
  background-color: #f2e2f2;
}

tr:hover {
  background-color: #FFFFFF;
}

tr.highlight {
  background-color: #000;
}

.mod {
  cursor: pointer;
  color: #a45127;
}

.mod:hover {
  cursor: pointer;
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select name='type'>
        <option value='spec'>SPEC</option>
        <option selected value='clg'>CLG</option>
        <option value='coa'>COA</option>
        <option value='gmo'>GMO</option>
        <option value='allergen'>ALLERGEN</option>
        <option value='audit'>AUDIT</option>
        <option value='cor'>COR</option>
        <option value='organic'>ORGANIC</option>
        <option value='kosher'>KOSHER</option>
        <option value='oth'>OTHER</option>
      </select>
    </td>
    <td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>

    <td>
      <select name='cat'>
        <option selected value='cur'>Current</option>
        <option value='oth'>Other</option>
        <option value='arc'>Archive</option>
      </select>
    </td>
    <td>2019-06-20 22:34:43</td>
    <td><a href='editUser.php?id=11'>11</a></td>
    <td><span class='mod' onclick="deleteFile(this, '1','<a href=\'/uploads/rm/46/46_clg_20190620223443.pdf\' target=\'_blank\'>46_clg_20190620223443.pdf</a>');">delete</span> | <span class='mod' onclick='modFile(1)'>modify</span></td>
  </tr>
</table>

Там также не нужны такие вещи, как 

var fileId = fileId;

Параметры функции уже являются локальными переменными, вам не нужно повторно объявлять их.

0 голосов
/ 28 июня 2019

Спасибо, ребята за всю информацию! Особенно @ Barmar & @ sscotti

Итак, как оказалось, проблема была в 3 раза.

  1. Передача информации об элементе в функцию и использование this. При вызове функции, стоящей за событием click onClick="deleteFile()", я пытался заставить функцию ссылаться на элемент, по которому щелкнули, и неуверенно предполагал, что информация об элементе была автоматически передана. @Barmar указал, что мне нужно включить this в качестве параметра в вызов функции.

  2. Синтаксис, который я использовал изначально в <tr> для событий onMouse*, был неверным. Я использовал onMouseOver=style.backgroundColor='#FFFFFF'; Это нарушало тег <tr>. Я должен был заметить это в jsFiddle, но я этого не сделал. Спасибо @sscotti за указание на это. Линия должна была быть onMouseOver="style.backgroundColor='#FFFFFF';" и аналогичной для onMouseOut.

  3. Дальнейшие исследования, основанные на упоминании @Barmar встроенного стиля, перезаписывающего CSS, привели меня к специфике CSS. Специфика - это базовое правило браузера с системой баллов. Где победителем будет тот, кто наберет больше всего очков. Inline style = 1000, id = 100, класс = 10, элемент = 1.

Использование событий onMouse* для изменения стиля было равно 1000 баллов. Я пытался изменить тот же стиль в моей функции, выдав addClass(), который стоит 10 баллов. Встроенные объявления стиля превзошли этот вызов, поэтому класс был проигнорирован.

Удалив встроенные объявления в стиле onMouse* из <tr> и переместив их в класс css, он понизил их с 1000 баллов до 10. Поскольку теперь они имеют то же значение, что и addClass(), другой базовый используется правило браузера. Когда очки совпадают, последний выигрывает.

Спасибо всем, кто внес свой вклад и помог привести меня к ответу. Да, я знаю, что некоторые из моих сценариев являются архаичными и рудиментарными. Совершенство - человек-призрак, ИМО не существует. Я живу по функциям перед формой, но я люблю совершенствовать свои практики.

Надеюсь, это кому-нибудь поможет.

...