我创建了一个带有引导程序的弹出窗口，用于存储几个社交媒体共享按钮。然后，我创建了两个左右按钮在它们之间进行导航。我的逻辑是，如果模体的宽度小于共享按钮的内容div宽度，则应显示导航按钮并向两侧移动到最末端。在这里，在我的代码中，我获得了错误的模体宽度，因此右侧导航按钮无法按预期工作，这是我无法转到最后一个共享按钮< / strong>。使用默认的加载屏幕大小似乎可以正常工作。 可以通过减小屏幕尺寸并尝试导航到最后一个共享按钮来准确地看到问题。我在这里错过了什么？
$('.modal').on('show.bs.modal', function () {
var currentPos = 0;
var shareBtns = $(".a2a_kit a").length;
var sampleDivWidth = $(".a2a_button_facebook span").width();
var actualButtonWidth = sampleDivWidth + 26
var shareDivWidth = (actualButtonWidth * shareBtns) / 3;
var mainDivWidth = $(".modal-body").width();
//var mainDivWidth = 445;
var x = shareDivWidth / actualButtonWidth;
var y = mainDivWidth / actualButtonWidth;
var z = (x - y);
var stopPos = z * (-actualButtonWidth);
//alert(mainDivWidth);
if( (mainDivWidth - 30) < shareDivWidth ) {
$(".move-btn").css("display", "block");
}
else {
$(".move-btn").css("display", "none");
}
if ( currentPos === 0 ) {
$(".move-btn-l").css("display", "none");
}
$(".move-btn-r").on("click", function() {
$(".a2a_kit").animate({
left : ""+ (currentPos -= 66) +"px"
}, 200);
$(".move-btn-l").css("display", "block");
if (currentPos <= stopPos) {
$(".move-btn-r").css("display", "none");
}
})
$(".move-btn-l").on("click", function() {
$(".a2a_kit").animate({
left : ""+ (currentPos += 66) +"px"
}, 200);
$(".move-btn-r").css("display", "block");
if (currentPos == 0) {
$(".move-btn-l").css("display", "none");
}
})
}).share-link-div{
overflow: hidden;
width: 75%;
margin: auto;
}
.a2a_kit {
display: inline-flex;
position: relative;
width: max-content;
}
.a2a_kit a .a2a_svg {
border-radius: 50% !important;
padding: 5px;
width: 50px;
height: 50px;
float: none !important;
}
.a2a_kit a:hover {
text-decoration: none !important;
}
.move-btn{
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
width: 35px;
height: 35px;
position: absolute;
top: 20px;
cursor: pointer;
box-shadow: 0 3px 3px #7d7d7d;
}
.move-btn-r {
right: 15px;
}
.move-btn-l {
left: 15px;
}
.move-btn span{
margin-left: 12px;
margin-top: 6px;
position: absolute;
}
.embed-btn .a2a_svg {
float: left;
background-color: #dedede;
color: #000;
font-size: 12px;
height: 32px;
font-weight: 600;
}
.embed-btn .a2a_svg:hover {
opacity: 0.7;
}
.embed-btn .a2a_svg p {
margin: 0px;
top: 5px;
position: relative;
text-align: center;
}
.embed-src{
padding: 10px;
border: 1px solid #ececec;
background-color: #fafafa;
font-size: 14px;
font-weight: 400;
}
.embed-button{
overflow: hidden;
display: flex;
margin-top: 20px;
}
.embed-button .embed-src {
float: left;
width: 100%;
}
.copy-iframe {
border-radius : 0 4px 4px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="share-link-div">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
</div>
<div class="move-btn move-btn-l">
<span><</span>
<!-- <i class="fas fa-chevron-left"></i> -->
</div>
<div class="move-btn move-btn-r">
<span>></span>
<!-- <i class="fas fa-chevron-right"></i> -->
</div>
</div>
<div class="embed-button">
<div class="embed-src">
<span>URL and Code</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
这是可编辑的代码：
答案 0 :(得分：1)
我认为如果不事先进行宽度初始化，就无法获得动态创建的div的宽度。也许您可以获取文档的宽度并进行计算？喜欢：
var mainDivWidth = document.documentElement.clientWidth;