1

私はカスタムTumblrHTMLテンプレートに取り組んでいます。各投稿（=クラス「post」を含むli）内で、クラス「callToAction」を含むdivを非表示にしますが、投稿に「＃id-Original」という名前のタグが含まれている場合に限ります。

これまでにこのCSSを試し、デフォルトでアクションdivの呼び出しを非表示にしました

.callToAction {
display:none;
}

次に、このJQueryステートメントは、投稿に「id-Original」タグが含まれている場合の召喚状を示します。

if ($('#id-Original')) {
  $('#id-Original').closest('li.post').css('background-color', '#005580');
  $('#id-Original').closest('.callToAction').css('display', 'block');
}

→現在の問題：タグに基づいて背景色が変化している間。召喚状のdivは常に非表示のままです。

HTML（2つの投稿の抜粋。1つは「id-Original」タグ付き、もう1つはなし）

              <li class="post photo textcentered">
                    <div class="row">
                        <div class="span12 textcentered">
                        ...
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12 addSpaceAtTop photocaption">
                            <p>Week #1 [Non-Original]</p>
                            <ul class="tags">
                                    <li>
                                        <a href="..." id="id-Weekly">Weekly</a>
                                    </li>
                             </ul>                
                        </div>
                        <div class="span12 addspace callToAction">
                            <p><a class="addspaceright" href="...">Download Original Size</a> <a class="btn" href="/submit">Upload Your Version</a>
                            </p>
                        </div>
                    </div>  
                </li>

                <li class="post photo textcentered">
                    <div class="row">
                        <div class="span12 textcentered">
                            ...
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12 addSpaceAtTop photocaption">
                            <p>Week #2 [Original]</p>
                            <ul class="tags">
                                    <li>
                                        <a href="..." id="id-Original">Original</a>
                                    </li>
                                    <li>
                                        <a href="..." id="id-Weekly">Weekly</a>
                                    </li>
                             </ul>                
                        </div>
                        <div class="span12 addspace callToAction">
                            <p><a class="addspaceright" href="...">Download Original Size</a> <a class="btn" href="/submit">Upload Your Version</a>
                            </p>
                        </div>
                    </div>  
                </li>
4

2 に答える 2

1 
$('#id-Original').closest('.callToAction').show().css('display', 'block');
于 2012-05-06T13:49:58.593 に答える
1 
var $deepSelector = $('li.post ul.tags');

$deepSelector.each(function() {

    if ($('li a#id-Original', this).length) {
        $(this)
               .closest('li.post')
               .css('background-color', '#005580')
               .find('div.callToAction')
               .css('display', 'block');
    }

});

ワーキングデモ

于 2012-05-06T13:55:19.263 に答える