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

Question

我一直在努力使用一些 jquery 和 php。我收到了一些数据，其中一个来自 php 的输入被放在这样的类中:

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

我可以看到该类已按异常(exception)情况添加到 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();
        });

如有任何反馈，我们将不胜感激。

Answer 1

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

对于 future 的读者，有两个 block 第 1 步:使用 closest 在 dom 上查找容器 第二:不要使用点击事件，而是在复选框上使用“更改”事件