- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在关注这个 Js fiddle
http://jsfiddle.net/ryt3nu1v/10/
我的结果:
我正在制作一个显示年龄的 slider ,因为我有一个跟随年龄的数组
15,25,35,45,55
我正在尝试在 slider 中显示它们
预期的行为是当我点击下一个按钮时看到下一个年龄
我根据需要从 fiddle 中使用的代码是
//Age slider
$('div.result-age:gt(0)').hide(); //Hide all but the first one
var $allSlides = $('div.result-age'),
traverseDefault = "first", //set the defaults
actionDefault ="arrow-next";
$('.arrow-next,.selected-arrow-left-pointer').click(function(){
var traverse = traverseDefault,
action = actionDefault;
if($(this).is('.selected-arrow-left-pointer')){ //if action is prev
traverse = "last"; //set traverse to last in case nothing is available
action = "selected-arrow-left-pointer"; //set action to prev
}
var $curr = $allSlides.filter(':visible'), //get the visible slide
$nxtTarget = $curr[action](".result-age"); //get the next target based on the action.
$curr.stop(true, true).fadeIn(1000).hide(); //hide current one
if (!$nxtTarget.length){ //if no next
$nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
}
$nxtTarget.stop(true, true).fadeIn(1000); //show the target
});
//age slider end
这是我的 HTML
<div class="result-box">
<div class="selected-arrow-left-pointer"></div>
<div class="result-age"><span><h4 v-for="(row,key,index) in ages">ALL ages here currently being display all at once</h4></span></div>
<div class="arrow-next"></div>
</div>
我目前的风格是年龄将显示在中心,左右两侧有下一个和上一个按钮
最佳答案
您的 v-for
正在创建多个 h4
标签,但您需要创建 result
每个数字的 div 所以移动你的v-for
在您的 div 标签内。然后,您为 actionDefault
使用了错误的值和 action
应该是 next
& prev
next 指的是下一张幻灯片,prev 指的是上一张幻灯片,而不是类名。
演示代码 :
$('div.result-age:gt(0)').hide();
var $allSlides = $('div.result-age'),
traverseDefault = "first",
actionDefault = "next"; //use next ..refer next node
$('.arrow-next,.selected-arrow-left-pointer').click(function() {
var traverse = traverseDefault,
action = actionDefault;
if ($(this).is('.selected-arrow-left-pointer')) {
traverse = "last";
action = "prev"; //use prev..refer prev..
}
var $curr = $allSlides.filter(':visible');
$nxtTarget = $curr[action](".result-age");
$curr.stop(true, true).fadeIn(1000).hide();
if (!$nxtTarget.length) {
$nxtTarget = $allSlides[traverse]();
}
$nxtTarget.stop(true, true).fadeIn(1000);
});
span.next,
span.prev {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="result-box">
<div class="selected-arrow-left-pointer">
<< </div>
<!--your div should have ` v-for="(row,key,index) in ages"`-->
<div class="result-age"><span><h4>1</h4></span></div>
<div class="result-age"><span><h4>2</h4></span></div>
<div class="result-age"><span><h4>3</h4></span></div>
<div class="arrow-next"> >> </div>
</div>
关于javascript - 在单击 slider 下一个和上一个按钮时,我得到 $curr[action] 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67965053/
考虑: #include #include struct node { int val; struct node *next; }; typedef struct node item;
产生幂集的函数给出了正确的输入。然而,用 append(curr) 替换 append(curr[:]) 会给出一个空列表的列表。是什么原因? def subsets(nums): def b
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
我想将元素列表拆分为列表列表,以便内部列表中的相邻元素满足给定条件。 一个简单的条件是相邻元素相等。那么如果输入是 List(1,1,1,2,2,3,3,3,3)输出为 List(List(1,1,1
我已经编写了一个脚本来更新 psycopg2 中的员工表,但更新没有发生,currr.execute 返回 None 对象。 我的代码 connm = psycopg2.con
我正在关注这个 Js fiddle http://jsfiddle.net/ryt3nu1v/10/ 我的结果: 我正在制作一个显示年龄的 slider ,因为我有一个跟随年龄的数组 15,25,35
我正在尝试将列表插入到 postgres 表中。 在 try 中,它在这一行失败了: curr.execute("""INSERT INTO CITY (name) values (%s);""",(
我是一名优秀的程序员,十分优秀!