如果标题div中有内容，我正面临着swiper滑块和分页的问题我想隐藏。
我创建了一个http://jsfiddle.net/1sta65uv/2/并做了一些关于它的研究，但到目前为止我没有办法。我知道我需要一个if语句但是如何获得与长度的连接？
也许你可以帮助我一点？会很棒
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption">Image caption</div>
</div>
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption"></div>
</div>
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption">Image caption</div>
</div>
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
编辑：
我想在有内容时隐藏分页。问题 - 它是一个动态页面。
表示
幻灯片1有分页
幻灯片2分页隐藏
幻灯片3有分页
幻灯片4分页隐藏
答案 0 :(得分：2)
if($('.swiper-slide-active').find('.caption').html() != '') {
$('.swiper-pagination').css('visibility', 'hidden');
} else {
$('.swiper-pagination').css('visibility', 'initial');
}
$('.caption').css('visibility', 'hidden');
甚至：
$('.caption').html('');
更新 - 如果您只想隐藏包含内容的字幕，您可以执行以下操作：
$('.caption').each(function() {
if ($(this).html() == '') {
$(this).css('visibility', 'hidden');
}
});
答案 1 :(得分：0)
您需要验证'div.caption'是否在其中包含html，或者只是将一个类分配给有内容的div。例如：
<?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
xsi:type="TaskPaneApp">
<Id>2c77d848-f893-4938-ad5f-5ea03d3608dc</Id>
<Version>1.0.0.0</Version>
<ProviderName>11trees</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- <DisplayName DefaultValue="Annotate PRO" /> -->
<DisplayName DefaultValue="Annotate PRO LOCAL" />
<Description DefaultValue="Access a library of pre-written comments that you can edit and extend to suit your needs. Add detailed feedback with one click!" />
<IconUrl DefaultValue="https://www.11trees.com/images/annotate/Annotate-32x32-circle.png" />
<SupportUrl DefaultValue="https://www.11trees.com/live/support/" />
<!--Icon for your add-in. Used on installation screens and the add-ins dialog -->
<AppDomains>
<AppDomain>https://trees-3aac6.firebaseio.com</AppDomain>
<AppDomain>https://www.firebaseapp.com</AppDomain>
<AppDomain>https://www.googleapis.com</AppDomain>
<AppDomain>https://www.facebook.com</AppDomain>
</AppDomains>
<Hosts>
<Host Name="Document"/>
</Hosts>
<Requirements>
<Sets DefaultMinVersion="1.1">
<Set Name="WordApi" MinVersion="1.1"/>
</Sets>
</Requirements>
<!-- Comment in/our local vs. production here and bottom of file... -->
<DefaultSettings>
<!-- Local Windows -->
<SourceLocation DefaultValue="http://localhost/AnnotateforWord_dev/AnnotateCode/annotateHome.html" />
<!-- Local macOS -->
<!-- <SourceLocation DefaultValue="http://localhost/AnnotateX/AnnoWord/annotateHome.html" /> -->
<!-- Staging -->
<!-- <SourceLocation DefaultValue="https://www.11trees.com/annotate/word/beta/AnnotateCode/annotateHome.html" /> -->
<!-- Production -->
<!-- <SourceLocation DefaultValue="https://www.11trees.com/annotate/word/prod/annotateHome.html" /> -->
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
<!--BeginAddinCommandsMode integration-->
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
<Hosts>
<!--Each host can have a different set of commands. Cool huh!? -->
<!-- Workbook=Excel Document=Word Presentation=PowerPoint -->
<!-- Make sure the hosts you override match the hosts declared in the top section of the manifest -->
<Host xsi:type="Document">
<!-- Form factor. Currenly only DesktopFormFactor is supported. We will add TabletFormFactor and PhoneFormFactor in the future-->
<DesktopFormFactor>
<!--GetStarted information used on the callout that appears when installing the add-in.
Ensure you have build 16.0.6769 or above for GetStarted section to work-->
<GetStarted>
<!--Title of the Getting Started callout. resid points to a ShortString resource -->
<Title resid="11trees.GetStarted.Title"/>
<!--Description of the Getting Started callout. resid points to a LongString resource -->
<Description resid="11trees.GetStarted.Description"/>
<!--Not used right now but you need to provide a valid resource. We will add code in the future to consume this URL.
resid points to a Url resource -->
<LearnMoreUrl resid="11trees.GetStarted.LearnMoreUrl"/>
</GetStarted>
<!--Function file is an html page that includes the javascript where functions for ExecuteAction will be called.
Think of the FunctionFile as the "code behind" ExecuteFunction-->
<FunctionFile resid="11trees.FunctionFile.Url" />
<!--PrimaryCommandSurface==Main Office Ribbon-->
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<!--Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab -->
<!-- Documentation includes all the IDs currently tested to work -->
<CustomTab id="11trees.Tab1">
<!--Group. Ensure you provide a unique id. Recommendation for any IDs is to namespace using your company name-->
<Group id="11trees.Tab1.Group1">
<!--Label for your group. resid must point to a ShortString resource -->
<Label resid="11trees.Tab1.GroupLabel" />
<Icon>
<!-- Sample Todo: Each size needs its own icon resource or it will look distorted when resized -->
<!--Icons. Required sizes 16,31,80, optional 20, 24, 40, 48, 64. Strongly recommended to provide all sizes for great UX -->
<!--Use PNG icons and remember that all URLs on the resources section must use HTTPS -->
<bt:Image size="16" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="32" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="80" resid="11trees.TaskpaneButton.Icon" />
</Icon>
<!-- The custom button (execute function) was here -->
<Control xsi:type="Button" id="11trees.TaskpaneButton">
<Label resid="11trees.TaskpaneButton.Label" />
<Supertip>
<Title resid="11trees.TaskpaneButton.Label" />
<Description resid="11trees.TaskpaneButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="32" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="80" resid="11trees.TaskpaneButton.Icon" />
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>Button2Id1</TaskpaneId>
<!--Provide a url resource id for the location that will be displayed on the task pane -->
<SourceLocation resid="11trees.Taskpane1.Url" />
</Action>
</Control>
<!-- Menu example -->
<Control xsi:type="Menu" id="11trees.Menu">
<Label resid="11trees.Dropdown.Label" />
<Supertip>
<Title resid="11trees.Dropdown.Label" />
<Description resid="11trees.Dropdown.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="32" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="80" resid="11trees.TaskpaneButton.Icon" />
</Icon>
<Items>
<!-- Home and account page -->
<Item id="11trees.Menu.Item1">
<Label resid="11trees.Item1.Label"/>
<Supertip>
<Title resid="11trees.Item1.Label" />
<Description resid="11trees.Item1.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="32" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="80" resid="11trees.TaskpaneButton.Icon" />
</Icon>
<!-- Insert Comments Page -->
<Action xsi:type="ShowTaskpane">
<TaskpaneId>MyTaskPaneID1</TaskpaneId>
<SourceLocation resid="11trees.Taskpane2.Url" />
</Action>
</Item>
<Item id="11trees.Menu.Item2">
<Label resid="11trees.Item2.Label"/>
<Supertip>
<Title resid="11trees.Item2.Label" />
<Description resid="11trees.Item2.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="32" resid="11trees.TaskpaneButton.Icon" />
<bt:Image size="80" resid="11trees.TaskpaneButton.Icon" />
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>MyTaskPaneID2</TaskpaneId>
<SourceLocation resid="11trees.Taskpane3.Url" />
</Action>
</Item>
</Items>
</Control>
</Group>
<!-- Label of your tab -->
<!-- If validating with XSD it needs to be at the end, we might change this before release -->
<Label resid="11trees.Tab1.TabLabel" />
</CustomTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>
<bt:Image id="11trees.TaskpaneButton.Icon" DefaultValue="https://www.11trees.com/images/annotate/Annotate-128x128-circle.png" />
<bt:Image id="11trees.FunctionButton.Icon" DefaultValue="https://www.11trees.com/images/annotate/Annotate-128x128-circle.png" />
</bt:Images>
<bt:Urls>
<!-- Local macOS -->
<bt:Url id="11trees.FunctionFile.Url" DefaultValue="http://localhost/AnnotateX/AnnoWord/functionFile.html" />
<bt:Url id="11trees.Taskpane1.Url" DefaultValue="http://localhost/AnnotateX/AnnoWord/AnnotateCode/annotateHome.html" />
<bt:Url id="11trees.Taskpane2.Url" DefaultValue="http://localhost/AnnotateX/AnnoWord/AnnotateCode/insertComment.html" />
<bt:Url id="11trees.Taskpane3.Url" DefaultValue="http://localhost/AnnotateX/AnnoWord/AnnotateCode/enterComment.html" />
<!-- Local Windows -->
<!-- <bt:Url id="11trees.FunctionFile.Url" DefaultValue="http://localhost/AnnotateforWord_dev/AnnotateCode/functionFile.html" /> -->
<!-- <bt:Url id="11trees.Taskpane1.Url" DefaultValue="http://localhost/AnnotateforWord_dev/AnnotateCode/annotateHome.html" /> -->
<!-- <bt:Url id="11trees.Taskpane2.Url" DefaultValue="http://localhost/AnnotateforWord_dev/AnnotateCode/insertComment.html" /> -->
<!-- <bt:Url id="11trees.Taskpane3.Url" DefaultValue="http://localhost/AnnotateforWord_dev/AnnotateCode/enterComment.html" /> -->
<!-- Staging -->
<!-- <bt:Url id="11trees.FunctionFile.Url" DefaultValue="http://localhost/AnnotateforWord_dev/AnnotateCode/functionFile.html" />
<bt:Url id="11trees.Taskpane1.Url" DefaultValue="https://www.11trees.com/annotate/word/beta/AnnotateCode/annotateHome.html" />
<bt:Url id="11trees.Taskpane2.Url" DefaultValue="https://www.11trees.com/annotate/word/beta/AnnotateCode/insertComment.html" />
<bt:Url id="11trees.Taskpane3.Url" DefaultValue="https://www.11trees.com/annotate/word/beta/AnnotateCode/enterComment.html" /> -->
<!-- Production -->
<!-- <bt:Url id="11trees.FunctionFile.Url" DefaultValue="https://www.11trees.com/annotate/word/prod/functionFile.html" />
<bt:Url id="11trees.Taskpane1.Url" DefaultValue="https://www.11trees.com/annotate/word/prod/annotateHome.html"/>
<bt:Url id="11trees.Taskpane2.Url" DefaultValue="https://www.11trees.com/annotate/word/prod/insertComment.html" />
<bt:Url id="11trees.Taskpane3.Url" DefaultValue="https://www.11trees.com/annotate/word/prod/enterComment.html" /> -->
<!--LearnMore URL currently not used -->
<bt:Url id="11trees.GetStarted.LearnMoreUrl" DefaultValue="https://11trees.com/live/support/">
</bt:Url>
</bt:Urls>
<bt:ShortStrings>
<bt:String id="11trees.FunctionButton.Label" DefaultValue="Execute Function" />
<bt:String id="11trees.TaskpaneButton.Label" DefaultValue="Annotate Home" />
<bt:String id="11trees.Dropdown.Label" DefaultValue="Actions" />
<bt:String id="11trees.Item1.Label" DefaultValue="Insert Comments" />
<bt:String id="11trees.Item2.Label" DefaultValue="Edit Comment Library" />
<bt:String id="11trees.Tab1.GroupLabel" DefaultValue="Annotate Basics" />
<bt:String id="11trees.Tab1.TabLabel" DefaultValue="Annotate" />
<bt:String id="11trees.GetStarted.Title" DefaultValue="Annotate for Word add-in was succesfully loaded">
<bt:Override Locale="ja-jp" Value="JA-JP Get Started Title" />
</bt:String>
</bt:ShortStrings>
<bt:LongStrings>
<bt:String id="11trees.FunctionButton.Tooltip" DefaultValue="Click to Execute Function" />
<bt:String id="11trees.TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane" />
<bt:String id="11trees.Dropdown.Tooltip" DefaultValue="Click to Show Options on this Menu" />
<bt:String id="11trees.Item1.Tooltip" DefaultValue="Click to Insert Comments" />
<bt:String id="11trees.Item2.Tooltip" DefaultValue="Click to Edit Your Library" />
<bt:String id="11trees.GetStarted.Description" DefaultValue="Get going by clicking the Annotate tab on the Ribbon">
<bt:Override Locale="ja-jp" Value="JA-JP Get Started Title" />
</bt:String>
</bt:LongStrings>
</Resources>
</VersionOverrides>
</OfficeApp>
然后像这样使用jQuery：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption captionContent">Image caption</div>
</div>
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption"></div>
</div>
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption captionContent">Image caption</div>
</div>
<div class="swiper-slide">
<img src="http://placekitten.com/500/300">
<div class="caption"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
我希望这能解决你的问题。
答案 2 :(得分：0)
尝试此操作：将.js文件编辑为
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationType: 'fraction'
});
swiper.on('slideChangeStart', function () {
flag=$('.swiper-slide-active>.caption').html();
if(flag!= "") {
$('.swiper-pagination').css('visibility', 'hidden');
} else {
$('.swiper-pagination').css('visibility', 'initial');
}
});
答案 3 :(得分：0)
谢谢你们，这个让它成功了。另外我需要在初始化后更新滑块
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
paginationType: 'fraction',
'onInit': function() {
flag = $('.swiper-slide-active>.caption').html();
if (flag != "") {
$('.swiper-pagination').css('visibility', 'hidden');
} else {
$('.swiper-pagination').css('visibility', 'initial');
}
}
});
swiper.on('slideChangeStart', function() {
flag = $('.swiper-slide-active>.caption').html();
if (flag != "") {
$('.swiper-pagination').css('visibility', 'hidden');
} else {
$('.swiper-pagination').css('visibility', 'initial');
}
});