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 セレクターを使用した 2 つの混合: http://jsfiddle.net/UtS6v/6/

于 2013-04-03T13:17:35.200 に答える