javascript - 复选框无法按预期使用jquery和php进行过滤

我一直在努力与一些jQuery和PHP。我收到一些数据，来自php的输入之一放在这样的类中：

<span class="<?php echo $row1['Tag']; ?>">

我可以看到该类已被添加到DOM中。

我想在带有jquery和jquerymobile的复选框过滤器函数中使用该类。

这是我得到复选框输入的地方：

  <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
        <div data-role="header">
            <h1>Menu</h1>
        </div>


    <form>
        <fieldset data-role="collapsible">
            <legend>Søg</legend>
                <div class="tags">
                <label for="textinput-f">Vælg Virksomheder:</label>

                <input type="checkbox" name="checkbox-1-a" id="it" rel="it">
                <label for="it">It</label>

                <input type="checkbox" name="checkbox-2-a" id="maskin" rel="maskin">
                <label for="maskin">Maskin</label>

                <input type="checkbox" name="checkbox-3-a" id="design" rel="design">
                <label for="design">Design</label>

                <input type="checkbox" name="checkbox-4-a" id="elektro" rel="elektro">
                <label for="elektro">Elektro</label>
                </div>
        </fieldset>
    </form>

我的html是我输入的php看起来像这样：

<div data-role="content" id="cont">
           <h1>h</h1>

<form>
    <input data-type="search" id="divOfPs-input">
</form>
<div  class="elements" data-filter="true" data-input="#divOfPs-input" data-role="collapsibleset" data-theme="a" data-content-theme="a">

<?php
         mysql_connect(localhost,$username,$password);
        @mysql_select_db($database) or die("<b>Unable to specified database</b>");
        //MySQL Query to read data

        $result1 = mysql_query("select * from Company");

        while ($row1 = mysql_fetch_array($result1, MYSQL_ASSOC)) {
?>
         <div class="results" data-mini="true" data-role="collapsible">
             <h3 ><?php echo $row1['CompanyName']; ?></h3>
              <p class="doh">

                <?php echo '<img style="max-width:100%" src="data:image/png;base64,' . base64_encode($row1['CompanyLogo']) . '" />';?></br>
                <span>Fagområde:</span> <?php echo $row1['CompanyField']; ?></br>
                <span>Telefon:</span> <?php echo $row1['ContactPhone']; ?></br>
                <span>Email:</span> <?php echo $row1['ContactEmail']; ?></br>
                <?php echo '<img style="max-width:100%" src="data:image/png;base64,' . base64_encode($row1['ContactImage']) . '" />';?></br>
                <span>Beskrivelse:</span> <?php echo $row1['CompanyDetail']; ?> </br>
                <span class="<?php echo $row1['Tag']; ?>">Søger:</span> <?php echo $row1['Tag']; ?>
              <p>
        </div>
        <?php } ?>

</div>

<?php
        mysql_close(); // Closing Connection with Server
?>
</div>

和我的jQuery看起来像这样：

$(document).ready(function () {
        $('.results').show();


        $('div.tags').find('input:checkbox').on('click', function () {

            $('.results').hide();

            $('div.tags').find('input:checked').each(function () {

                $('.doh > span.' + $(this).attr('rel')).show();
            });

        });

   });

我可以使用$('.results').hide();隐藏我的内容，但是当我尝试使用它时，它不会过滤并显示我的内容：

        $('div.tags').find('input:checked').each(function () {
            $('.doh > span.' + $(this).attr('rel')).show();
        });

对于任何反馈，我们都表示感谢。

最佳答案

这是解决方案，基于我们在聊天中的讨论
http://jsfiddle.net/TCHdevlp/t387kz67/14/

对于未来的读者，有两个大块
1st：使用closest向上dom查找容器
第二：不要使用点击事件，而是在复选框上使用“更改”事件