我正在尝试使用SlimSelect并在每个字段中使用水平文本滚动来创建多选下拉列表。现在一切似乎都可以工作,但事实是,它只能工作一次(第一次单击值)。之后,mouseover
和mouseout
似乎只是放弃了。我已经看过堆栈了,但是所有这些问题都有代码答案,并且缺少“为什么只触发一次”的一般解释,所以这对我没有帮助。
$('.ms-class > option').addClass('scroll-text ellipsis');
new SlimSelect({
select: '#slim-multi-select',
allowDeselectOption: true,
showContent: 'down',
})
$(".ss-option.scroll-text").on({
mouseover: function() {
$(this).removeClass("ellipsis");
var maxscroll = $(this)[0].scrollWidth;
var speed = maxscroll * 15;
$(this).animate({
scrollLeft: maxscroll
}, speed, "linear");
},
mouseout: function() {
$(this).stop();
$(this).addClass("ellipsis");
$(this).animate({
scrollLeft: 0
}, 'slow');
}
});
.ms-class {
width: 200px !important;
}
.ms-class .ss-content {
z-index: 2;
}
.ms-class .ss-content .ss-list {
max-height: 100% !important;
}
.ms-class .ss-multi-selected .ss-values .ss-value {
font-size: 14px;
margin: 5px 5px 5px 0;
background-color: #884fa1;
}
.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
display: inline-block;
width: 33%;
}
.ms-class .ss-content .ss-list .ss-option.ss-hide,
.ms-class .ss-content .ss-list .ss-option.ss-hide {
display: none;
}
.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
display: inline-block;
width: 25%;
}
.ms-class .ss-content .ss-list .ss-option {
vertical-align: middle;
text-align: center;
height: 50px;
line-height: 0.9em;
white-space: nowrap;
overflow: hidden !important;
}
.ms-class .ss-content .ss-list .ss-option:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.ss-option:hover {
background-color: #884fa1 !important;
color: white;
}
.ms-class .ss-multi-selected .ss-values .ss-disabled,
.ms-class .ss-content .ss-search input {
font-family: 'Exo 2', 'Font Awesome 5 Free';
font-weight: 900 !important;
color: #444444 !important;
}
.ms-class .ss-multi-selected .ss-values .ss-disabled {
margin: 0 8px;
}
.ms-class .ss-content .ss-list .ss-option:only-child,
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
width: 100% !important;
}
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2)~.ss-option {
width: 50% !important;
}
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3)~.ss-option {
width: 33% !important;
}
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
width: 100% !important;
}
.ms-class .ss-multi-selected {
border-radius: 5px !important;
border: solid 1px #e8e8e8 !important;
min-height: 42px !important;
line-height: 100%;
-webkit-tap-highlight-color: transparent;
}
.ms-class .ss-multi-selected .ss-add {
display: flex;
flex: 0 1 3px;
margin: 14px 12px 0 5px;
}
.ms-class .ss-multi-selected .ss-add .ss-plus,
.ms-class .ss-multi-selected .ss-add .ss-plus:after {
background: #999;
}
.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
background-color: rgba(136, 79, 161, 0.32);
}
.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:hover {
color: white !important;
}
.ellipsis {
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slim-multi-select" class="ms-class" multiple>
<option value="value 1">Some long value that doesn't fit here</option>
<option value="value 2">Value 2</option>
<option value="value 3">Another real long value that doesn't fit</option>
<option value="value 4">Value 4</option>
<option value="value 5">Value 5</option>
</select>
我对前端的东西不太满意,所以我希望获得一些帮助。
答案 0 :(得分:4)
在js中进行以下更改将起作用:
$(".ss-content").on('mouseover', '.ss-option.scroll-text', function() {
$(this).removeClass("ellipsis");
var maxscroll = $(this)[0].scrollWidth;
var speed = maxscroll * 15;
$(this).animate({
scrollLeft: maxscroll
}, speed, "linear");
});
$(".ss-content").on('mouseout', '.ss-option.scroll-text', function() {
$(this).stop();
$(this).addClass("ellipsis");
$(this).animate({
scrollLeft: 0
}, 'slow');
});
导致代码无法正常工作的原因
您的代码仅在单击任何项之前有效。单击时,slimSlect
删除了所有dom并重新创建它,这也删除了附加到该DOM的事件。由于您的DOM和附加的事件都已删除,因此两个mouseout/over
事件均无效。
我如何解决此问题:
查看代码块$(".ss-content").on('mouseout', '.ss-option.scroll-text'
。我在您.ss-content
处mouserout/over
附加了此事件,它将搜索始终存在的类.ss-option.scroll-text
。
如果您从父级中进行选择,则动态子域将始终附加该事件。
@Nowshath如何解决此问题:
他添加了一个beforeOpen and onChange
钩子,每当您尝试打开或更改值时,该钩子就会调用方法ScrollText
将事件注册到dom
$('.ms-class > option').addClass('scroll-text ellipsis');
new SlimSelect({
select: '#slim-multi-select',
allowDeselectOption: true,
showContent: 'down',
})
$(".ss-content").on('mouseover', '.ss-option.scroll-text', function() {
$(this).removeClass("ellipsis");
var maxscroll = $(this)[0].scrollWidth;
var speed = maxscroll * 15;
$(this).animate({
scrollLeft: maxscroll
}, speed, "linear");
});
$(".ss-content").on('mouseout', '.ss-option.scroll-text', function() {
$(this).stop();
$(this).addClass("ellipsis");
$(this).animate({
scrollLeft: 0
}, 'slow');
});
.ms-class {
width: 200px !important;
}
.ms-class .ss-content {
z-index: 2;
}
.ms-class .ss-content .ss-list {
max-height: 100% !important;
}
.ms-class .ss-multi-selected .ss-values .ss-value {
font-size: 14px;
margin: 5px 5px 5px 0;
background-color: #884fa1;
}
.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
display: inline-block;
width: 33%;
}
.ms-class .ss-content .ss-list .ss-option.ss-hide,
.ms-class .ss-content .ss-list .ss-option.ss-hide {
display: none;
}
.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
display: inline-block;
width: 25%;
}
.ms-class .ss-content .ss-list .ss-option {
vertical-align: middle;
text-align: center;
height: 50px;
line-height: 0.9em;
white-space: nowrap;
overflow: hidden !important;
}
.ms-class .ss-content .ss-list .ss-option:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.ss-option:hover {
background-color: #884fa1 !important;
color: white;
}
.ms-class .ss-multi-selected .ss-values .ss-disabled,
.ms-class .ss-content .ss-search input {
font-family: 'Exo 2', 'Font Awesome 5 Free';
font-weight: 900 !important;
color: #444444 !important;
}
.ms-class .ss-multi-selected .ss-values .ss-disabled {
margin: 0 8px;
}
.ms-class .ss-content .ss-list .ss-option:only-child,
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
width: 100% !important;
}
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2)~.ss-option {
width: 50% !important;
}
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3)~.ss-option {
width: 33% !important;
}
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
width: 100% !important;
}
.ms-class .ss-multi-selected {
border-radius: 5px !important;
border: solid 1px #e8e8e8 !important;
min-height: 42px !important;
line-height: 100%;
-webkit-tap-highlight-color: transparent;
}
.ms-class .ss-multi-selected .ss-add {
display: flex;
flex: 0 1 3px;
margin: 14px 12px 0 5px;
}
.ms-class .ss-multi-selected .ss-add .ss-plus,
.ms-class .ss-multi-selected .ss-add .ss-plus:after {
background: #999;
}
.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
background-color: rgba(136, 79, 161, 0.32);
}
.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:hover {
color: white !important;
}
.ellipsis {
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slim-multi-select" class="ms-class" multiple>
<option value="value 1">Some long value that doesn't fit here</option>
<option value="value 2">Value 2</option>
<option value="value 3">Another real long value that doesn't fit</option>
<option value="value 4">Value 4</option>
<option value="value 5">Value 5</option>
</select>
答案 1 :(得分:1)
我认为更改数据后会重新生成div,因此事件绑定未正确进行。我已经在open事件和Change事件中添加了它。
$('.ms-class > option').addClass('scroll-text ellipsis');
new SlimSelect({
select: '#slim-multi-select',
allowDeselectOption: true,
showContent: 'down',
beforeOpen: function () { console.log('beforeOpen'); ScrollText(); },
onChange: function(info){
console.log(info);
ScrollText();
}
})
function ScrollText() {
$(".ss-option.scroll-text").on({
mouseover: function() {
$(this).removeClass("ellipsis");
var maxscroll = $(this)[0].scrollWidth;
var speed = maxscroll * 15;
$(this).animate({
scrollLeft: maxscroll
}, speed, "linear");
},
mouseout: function() {
$(this).stop();
$(this).addClass("ellipsis");
$(this).animate({
scrollLeft: 0
}, 'slow');
}
});
}
.ms-class {
width: 200px !important;
}
.ms-class .ss-content {
z-index: 2;
}
.ms-class .ss-content .ss-list {
max-height: 100% !important;
}
.ms-class .ss-multi-selected .ss-values .ss-value {
font-size: 14px;
margin: 5px 5px 5px 0;
background-color: #884fa1;
}
.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
display: inline-block;
width: 33%;
}
.ms-class .ss-content .ss-list .ss-option.ss-hide,
.ms-class .ss-content .ss-list .ss-option.ss-hide {
display: none;
}
.ms-class .ss-content .ss-list .ss-option,
.ms-class .ss-content .ss-list .ss-option-selected {
display: inline-block;
width: 25%;
}
.ms-class .ss-content .ss-list .ss-option {
vertical-align: middle;
text-align: center;
height: 50px;
line-height: 0.9em;
white-space: nowrap;
overflow: hidden !important;
}
.ms-class .ss-content .ss-list .ss-option:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.ss-option:hover {
background-color: #884fa1 !important;
color: white;
}
.ms-class .ss-multi-selected .ss-values .ss-disabled,
.ms-class .ss-content .ss-search input {
font-family: 'Exo 2', 'Font Awesome 5 Free';
font-weight: 900 !important;
color: #444444 !important;
}
.ms-class .ss-multi-selected .ss-values .ss-disabled {
margin: 0 8px;
}
.ms-class .ss-content .ss-list .ss-option:only-child,
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
width: 100% !important;
}
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(2)~.ss-option {
width: 50% !important;
}
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3),
.ms-class .ss-content .ss-list .ss-option:first-child:nth-last-child(3)~.ss-option {
width: 33% !important;
}
.ms-class .ss-content .ss-list .ss-option.ss-disabled:only-child {
width: 100% !important;
}
.ms-class .ss-multi-selected {
border-radius: 5px !important;
border: solid 1px #e8e8e8 !important;
min-height: 42px !important;
line-height: 100%;
-webkit-tap-highlight-color: transparent;
}
.ms-class .ss-multi-selected .ss-add {
display: flex;
flex: 0 1 3px;
margin: 14px 12px 0 5px;
}
.ms-class .ss-multi-selected .ss-add .ss-plus,
.ms-class .ss-multi-selected .ss-add .ss-plus:after {
background: #999;
}
.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
background-color: rgba(136, 79, 161, 0.32);
}
.ms-class .ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected:hover {
color: white !important;
}
.ellipsis {
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.23.0/slimselect.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slim-multi-select" class="ms-class" multiple>
<option value="value 1">Some long value that doesn't fit here</option>
<option value="value 2">Value 2</option>
<option value="value 3">Another real long value that doesn't fit</option>
<option value="value 4">Value 4</option>
<option value="value 5">Value 5</option>
</select>