1

我正在开发一个自定义 Tumblr HTML 模板。在每个帖子（= li 包括“post”类）中，我想隐藏一个包含“callToAction”类的 div，但前提是该帖子包含名称为“#id-Original”的标签。

到目前为止，我尝试使用此 CSS 默认隐藏号召性用语 div

.callToAction {
display:none;
}

然后如果帖子包含“id-Original”标签，则此 JQuery 语句将显示号召性用语。

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

→ 当前问题：背景颜色根据标签而变化。号召性用语 div 始终保持隐藏状态。

HTML（摘自 2 篇文章，一篇带有“id-Original”标签，一篇没有）

              <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 回答