jQuery中的更改/每个问题

时间:2014-10-14 17:59:46

标签: javascript jquery

试图做一些无济于事的搜索:(

我遇到了jQuery中每个循环的问题。它应该检测select中的变化,然后使用select的值,运行循环,如果data-cid属性值等于select的值,那么它应该显示带有data-cid的div属性。但是我一直得到未定义的错误。

HTML

<div class="form-row">
    <label for="community">Select A Community</label>
    <select name="community" id="community" class="selectInput">
        <option value="0">No Community</option>
           <?php foreach ($communities as $c): ?>
                <option value="<?php echo $c->getcID(); ?>">
                      <?php echo $c->getName(); ?>
                </option>
           <?php endforeach; ?>
    </select>
</div>
<div class="form-row">
    <?php foreach ($communities as $c): ?>
        <div class="community-display" data-cid=<?=$c->getcID(); ?>>
            <div class="name">
                <?=$c->getName(); ?>
            </div>
            <div class="address">
                <?=$c->getAddress(); ?><br />
                <?=$c->getCity() . " " . $c->getState() . " " . $c->getZip(); ?>
            </div>
            <div class="contact">
                <?=$c->getPhone(); ?><br />
                <?=$c->getEmail(); ?>
            </div>
        </div>
    <?php endforeach; ?>
</div>

Jquery的

<script>
$(document).ready(function(){
    $('#community').change(function(){
        $('.community-display').hide();
        $('.community-display').each(function(){
             if ($(this).data('cid').val() == $('#community').val()){
                 $(this).show();
            }
        });
    });
});
</script>

编辑:包含JSFiddle,错误是类型错误,只是不确定在哪里 http://jsfiddle.net/cj6st8y4/

2 个答案:

答案 0 :(得分:1)

对于这个愚蠢的问题,很抱歉,我刚刚意识到.data处理程序已经返回一个值,并且尝试获取val的val是导致错误的原因。这是固定的JS ......我嘲笑。

<script>
$(document).ready(function(){
    $('#community').change(function(){
        $('.community-display').hide();
        $('.community-display').each(function(){
             if ($(this).data('cid') == $('#community').val()){
                 $(this).show();
            }
        });
    });
});
</script>

答案 1 :(得分:1)

这就是你需要的:

$(document).ready(function(){
    $('#community').change(function(){
        $('.community-display').hide()
        .filter('[data-cid=' + this.value + ']').show()
    });
});