Question

我正在开发一个自定义Tumblr HTML模板。在每个帖子中（= li包括类“post”）我想隐藏包含“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个帖子的摘录，一个带有“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>

Answer 1

$('#id-Original').closest('.callToAction').show().css('display', 'block');

Answer 2

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');
    }

});

WORKING DEMO

如果存在特定标签，则在帖子中有条件地显示div

2 个答案: