Question

我是一个jQuery noob，但我找不到一个非常基本问题的答案！

我正在尝试创建一个系统，用户可以单击列表中的单词，然后jQuery获取该列表项的内容，将其添加到变量中，然后在我的演示中为任何项添加背景颜色另一个找到该单词的列表。

代码似乎正在创建变量，并且变量的内容是正确的，但我不能让它在我的选择器的：contains（variable）部分中使用变量的内容。如果我手动添加一个单词，例如铝，它似乎工作正常。

我确信这只是我在使用该语言方面缺乏经验，但是几天来一直在搜索大型复杂系统，但没有像这样的基础知识。

你可以从下面看到我使用alert（test）检查变量是否包含正确的字符串，然后我试图将该字符串传递给：contains（test）或（#test）所以它会搜索包含此字符串的table.selection-items中的行的高亮显示。

任何想法都会很棒。对不起，这是一个noob问题！

感谢西蒙

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 {
    }


});

});

Answer 1

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

jQuery将变量的内容传递给选择器

1 个答案: