1

我对 Javascript 非常陌生，但希望有人能就以下问题提出建议。我有以下 div 类，如果缺少 {retreat_dates} 字段，部分要求是隐藏整个 div 及其所有子 h2 字段，有人可以指出我正确的方向吗？

    <div class="grid_3 retreatextradetails">

        <h2>Retreat dates</h2>
        <p>
        {retreat_dates}{date}<br />{/retreat_dates} 
        </p>
        <div class="hr"></div>
        <h2>Age range</h2>
        <p>{retreat_age}</p>

        <div class="hr"></div>

        <h2>Fitness level</h2>
        <p>{retreat_fitness}</p>

        <div class="hr"></div>

        <h2>No. of places</h2>
        <p>{retreat_places}</p>

        <div class="hr"></div>

        <h2>Retreat Prices</h2>
        <table>
        {retreat_prices}
        <tr>
            <td class="cell_title">{description}</td>
            <td class="price">{price}></td>
        </tr>
        {/retreat_prices}
        </table>
    </div>

这是我正在使用的相应javascript，但它不起作用：

</script>
$("#filterTextBox").on("keyup", function () {
    var search = this.value;
    $(".grid_3 retreatextradetails").show().filter(function () {
        return $(".retreat_dates", this).text().indexOf(search) < 0;
    }).hide();        
});
<script type="text/javascript">
4

3 回答 3

3

您可以在尝试后在 javascript 文件中添加函数。

$('.retreatextradetails').find("h2").each(function() {
    if($(this).next('p').html().trim().indexOf("{retreat_dates}")==-1){
        $(this).hide();
        $(this).next('p').hide();
        $(this).next('div').hide();

    }

});

希望对你有帮助。

于 2013-04-03T13:49:20.330 回答
2

因为您可以使用 jquery，所以我会执行以下操作：

给持有日期的 p 某种类名 - 例如<p class="rdates">

然后您可以在准备好的文档上使用以下jquery

$('.retreatextradetails').each(function() {
    if ($(this).children('.rdates:eq(0)').text().trim() == "") {
       $(this).hide(); 
    }
});

http://jsfiddle.net/UtS6v/

更新

我已更改答案以匹配您提供的 js

$('#filterBox').keyup(function() {
    var search = $(this).val();
    $('.retreatextradetails').hide();
    $('.rdates:contains("' + search + '")').each(function() {
        $(this).parent().show();
    });
});

http://jsfiddle.net/UtS6v/4/

使用 p 选择器将两者混合：http: //jsfiddle.net/UtS6v/6/

于 2013-04-03T13:17:35.200 回答
1

让我们从部分开始。

  1. 要在 jQuery 中隐藏一个 DOM 元素，请使用 .hide()，再次显示它 .show() 所以 $("yourSelector").hide() 应该隐藏“yourSelector”找到的所有元素

  2. 选择器是jQuery中最强大的工具，你应该掌握它们

  3. 您可以使用jquery-debugger 之类的工具（一个 chrome 开发工具扩展，它允许您在任何带有 jQ​​uery 的页面中尝试您的选择器）

  4. 最后一个示例似乎与您需要的非常相似，如果您需要其他内容，请询问，我会尽力提供帮助。

于 2013-04-03T13:37:50.690 回答