复选框未按jquery和php的预期进行筛选

Checkbox not filtering as expected with jquery and php

本文关键字:筛选 php jquery 复选框      更新时间:2023-09-26

我一直在与一些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/

对于未来的读者来说,有两块第一:使用closest在dom上查找容器第二:不使用点击事件,而是在复选框

上使用"更改"事件