jQuery Передача содержимого переменной в селектор

Я немного jQuery noob, но я не могу найти ответ на очень простой вопрос!jQuery Передача содержимого переменной в селектор

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

Код, кажется, создает переменную в порядке, и содержимое переменной верное, но я не могу заставить ее использовать содержимое переменной в: содержит (переменную) часть моего селектора. Если я добавлю слово вручную, например, алюминий, он работает нормально.

Я уверен, что это просто моя неопытность с использованием языка, но трафик через Google в течение многих дней, когда мы находим массивно сложные системы, но таких оснований не существует.

Из нижеследующего видно, что я использую alert (test), чтобы проверить, что переменная содержит правильную строку, затем я пытаюсь передать эту строку в: contains (test) или (#test), чтобы она будет искать выделение строк в table.selection-items, которые включают эту строку.

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

Спасибо Simon

HTML

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="config-test.js" type="text/javascript"></script> 

<style type="text/css"> 
.highlight { 
    color: #F00; 
} 
.selection-itemsdiv { 
    display: block; 
    width: 200px; 
    background-color:#CCC; 
} 
</style> 
</head> 

<body> 

<p class="no-script">For the selection guide to work you must have javascript enabled</p> 

<ol class="selection-criteria"> 
    <li>Is this for a hazardous location? For example ex d rated enclosures? 
     <ol class="hazardous"> 
      <li>Yes</li> 
      <li>No</li> 
     </ol> 
    </li> 


    <li>Materials 
     <ol class="material"> 
      <li>Plastic</li> 
      <li>Steel</li> 
      <li>Aluminium</li> 
      <li>Stainless Steel</li> 
     </ol> 
    </li> 
    <li>IP Rating 
     <ol class="iprating"> 
      <li>IP55</li> 
      <li>IP56</li> 
      <li>IP65</li> 
      <li>IP66</li> 
     </ol> 
    </li> 
</ol> 

<table class="selection-items"> 
    <thead> 
     <tr> 
      <td>Image</td> 
      <td>Range</td> 
      <td>Hazardous Location</td> 
      <td>Material</td> 
      <td>IP Rating</td> 
      <td>Smallest Size</td> 
      <td>Biggest Size</td> 
     </tr> 
      <tr> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
       <td>5</td> 
       <td>6</td> 
       <td>7</td> 
      </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="image">Image</td> 
      <td class="range">Universal NI (Steel)</td> 
      <td class="hazardous">No</td> 
      <td class="material">Steel</td> 
      <td class="iprating">IP66</td> 
      <td class="smlsize">300x200x150</td> 
      <td class="lrgsize">1200x800x300</td> 
     </tr> 
      <tr> 
       <td class="image">Image</td> 
       <td class="range">Monarch IP (Stainless)</td> 
       <td class="hazardous">No</td> 
       <td class="material">Stainless Steel</td> 
       <td class="iprating">IP66</td> 
       <td class="smlsize">300x200x175</td> 
       <td class="lrgsize">2000x800x600</td> 
      </tr> 

      <tr> 
       <td class="image">Image</td> 
       <td class="range">Monarch IP (Aluminium)</td> 
       <td class="hazardous">No</td> 
       <td class="material">Aluminium</td> 
       <td class="iprating">IP66</td> 
       <td class="smlsize">407x407x272</td> 
       <td class="lrgsize">2007x807x602</td> 
      </tr> 

      <tr> 
       <td class="image">Image</td> 
       <td class="range">Connector TE (Steel)</td> 
       <td class="hazardous">No</td> 
       <td class="material">Steel</td> 
       <td class="iprating">IP66</td> 
       <td class="smlsize">150x150x80</td> 
       <td class="lrgsize">600x200x120</td> 
      </tr> 

      <tr> 
       <td class="image">Image</td> 
       <td class="range">Connector TE (Steel)</td> 
       <td class="hazardous">No</td> 
       <td class="material">Stainless Steel</td> 
       <td class="iprating">IP66</td> 
       <td class="smlsize">150x150x80</td> 
       <td class="lrgsize">600x200x120</td> 
      </tr> 

      <tr> 
       <td class="image">Image</td> 
       <td class="range">Exe Sloping Roof Terminal Box</td> 
       <td class="hazardous">Yes</td> 
       <td class="material">Stainless Steel</td> 
       <td class="iprating">IP66</td> 
       <td class="smlsize">300x200x150</td> 
       <td class="lrgsize">1200x800x300</td> 
      </tr> 

    </tbody> 
</table> 

<div class="selection-itemsdiv"> 
<h3>Connector TE</h3> 
<p>No</p> 
<p>Stainless Steel</p> 
<p>IP66</p> 
<p>300x200x150</p> 
<p>1200x800x300</p> 
</div> 



</body> 
</html>

JQuery

$(document).ready(function() { 

// This removes the Script warning on the page 
    $('p.no-script').remove(); 


$('ol.selection-criteria ol li').click(function() { 

    $(this).addClass('highlight'); 

    if($('ol.selection-criteria ol li').hasClass('highlight')) { 
     var test = $(this).html(); 
     alert(test); 
     $('table.selection-items tbody tr:contains(#test)').css('background-color','#dddddd') 
    } 
    else { 
    } 


}); 

});

источник

2012-05-16 Simon Griffiths

$('table.selection-items tbody tr').contains(test).css('background-color','#dddddd')

источник

2012-05-16 02:57:48

Спасибо, я знал, что я должен получать синтаксис неправильно где-то. Я все еще не получаю строки table.selection-items, которые нужно выделить. Есть идеи? –

Ура! Починил это! Строка должна быть: - $ ("table.selection-items tbody tr: содержит ('" + test + "')"). Css ('background-color', '# dddddd'); См. Комментарии внизу [link] http://api.jquery.com/contains-selector/ [/ link] –

jQuery Передача содержимого переменной в селектор

ответ

Смежные вопросы