如果在 jQuery Cycle2 Caption 中为空，如何删除标题或描述答案

【问题标题】：How to remove Title or Description if empty in jQuery Cycle2 Caption如果在 jQuery Cycle2 Caption 中为空，如何删除标题或描述
【发布时间】：2014-08-31 00:12:18
【问题描述】：

在我的幻灯片中，有些幻灯片没有标题，但我添加的样式使标题和说明框没有任何文字出现，显然这看起来很奇怪。

如果找不到文本，如何使字幕插件不显示标题/描述？

代码如下：

<div class="cs" data-cycle-caption-plugin=caption2>
    <div class="cycle-overlay"></div>
    <img src="images/bg.jpg" >
    <img src="images/i1.jpg" data-cycle-title="Winter" data-cycle-desc="Awesome!!!" >
    <img src="images/i2.jpg" >
</div>

这是 JS 代码：

$('.cs').cycle({
    speed: 600,
    manualSpeed: 6000
});

我继续编辑了 caption plugin for Cycle2; version: 20130306 并将这个类代码 class="cap_title" 添加到以下行中：

overlayTemplate:  '<div class="cap_title">{{title}}</div><div>{{desc}}</div>',

然后我尝试使用以下事件隐藏“.cycle-overlay”，但失败了：

$( '.cs' ).on( 'cycle-next', function( event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
    if($('.cap_title').html()==''){
        $('.cap_title').hide();
        $('.cycle-overlay').hide();
    } else { 
        $('.cap_title').show(); 
    }
});

【问题讨论】：

向我们展示一些代码会更容易为您提供帮助。
@entiendoNull 刚刚添加，谢谢。

标签： jquery jquery-cycle2

【解决方案1】：

谢谢你，克日什托夫！这对我也有用。

对其他人有用的说明：Krzysztof 的代码将隐藏所有缺少或标题或描述的幻灯片的叠加层。这最初让我失望，因为我有一些带有标题但没有描述的幻灯片。我希望显示这些幻灯片上的标题，而不是隐藏。为了得到这个结果，我所要做的就是将“if”语句中的“or”改为“and”：

原版：

if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title'))

修改：

if (!currentSlideEl.getAttribute('data-cycle-desc') && !currentSlideEl.getAttribute('data-cycle-title'))

注意：这实际上是对 Krzysztof Safjanowski 答案的评论，而不是单独的答案。我没有足够的声望点来发表评论——啊！如果具有更高访问权限的人可以更改我对评论的回答，我将不胜感激。谢谢！

【讨论】：

在 cmets 中没有办法放置漂亮的格式化代码；（(!expression && !expression) 与 (!(expression || expression)) 相同

【解决方案2】：

诀窍是我正在动态修改模板。如果未提供 title 或 description - 模板设置为空 ''。

$('.slideshow').cycle({
    speed: 600,
    manualSpeed: 6000,
}).on('cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) {
    if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title')) {
        slideOptionsHash.overlayTemplate = '';
    } else { 
        slideOptionsHash.overlayTemplate = '<div>{{title}}</div><div>{{desc}}</div>';
    }
});

jsfiddle：http://jsfiddle.net/krzysztof_safjanowski/waXCF/

【讨论】：